title: Bootstrap popover not working inside AngularJs ng-repeat
body: <p>I have a countries list and I am populating those using ng-repeat, everything is working fine. Also, I am trying to show some other details inside each country by using the bootstrap popover and it doesn't seem to work so can someone please help me?</p>
  
  <p>Html Code:</p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="my_controller"&gt;    
  &lt;div class="span3 projectCard" ng-repeat="country in all_countries"&gt;
      &lt;div class="projectCardHeight"&gt;
          &lt;button class="btn close cardClose" ng-click="deleteCountry(country.id)"&gt;×&lt;/button&gt;
          &lt;div class="cardHeader"&gt;Country&lt;/div&gt;
          &lt;div class="cardBody"&gt;{{country.id}}&lt;/div&gt;
          &lt;div class="cardBody"&gt;{{country.title}}&lt;/div&gt;
          &lt;div class="cardBody"&gt;&lt;a href="#" id="pop{{country.id}}" class="btn btn-primary" rel="popover" data-content="This is the &lt;b&gt;body&lt;/b&gt; of Popover" data-original-title="Creativity Tuts"&gt;pop&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>Javascript Code:
  </p>
  
  <pre><code>var app = angular.module("app", []);
  app.controller('my_controller', function($scope) {  
      $scope.all_countries = [
          {"id":28,"title":"Sweden"},
          {"id":56,"title":"USA"},
          {"id":89,"title":"England"}];
  });
  
  function deleteCountry(id)
  {
      alert("Do something");
  }
  
  $(document).ready(function () {
      $("a[rel=popover]")
          .popover({ placement: 'bottom', html: 'true' })
          .click(function (e) {
              e.preventDefault();
          });
  });
  </code></pre>
  
  <p>Please refer to this <a href="http://jsfiddle.net/shansubra/4bqgX/54/" rel="noreferrer">JsFiddle</a></p>