title: Angular with Bootstrap popovers. How to apply bindings in generated popover's body?
body: <p>I want to use bootstrap popovers as dialogs. </p>
  
  <pre><code>    &lt;a popover href="#" 
          data-toggle="popover" title="" 
          data-html="true" 
          data-content=
             "&lt;p&gt;Are you sure? {{contact.FirstName}} will be removed!&lt;/p&gt;
              &lt;button class='btn'&gt;Yes&lt;/button&gt;
              &lt;button ng-click='cancel()' class='btn'&gt;Cancel&lt;/button&gt;" 
          data-original-title="Remove Contact"&gt;Remove&lt;/a&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var ang = angular.module("ang", []);
  
  ang.controller("angCtrl", function($scope) {
      $scope.contact = {
              Id: 1,
              FirstName: "John",
              LastName: "Doe"
          };
  
      $scope.cancel = function() {
          console.log('Cancel called');
      };
  });
  
  ang.directive("popover", function() {
      return {
          restrict: "A",
          link: function (scope) {
              scope.$watch("contacts", function () {
                  $("a[data-toggle=popover]")
                  .popover()
                  .click(function (e) {
                      e.preventDefault();
                  });
              });
          }
      };
  });
  </code></pre>
  
  <p>The problem is bootarap generates popover html after angular has applied its bindings. How can I include a new generated popover?</p>
  
  <p>Thanks in advance!</p>