title: Cannot get an AngularJS popover to work inside a directive's template
body: <p>I'm in AngularJS (1.2.10) and I have a form that is an HTML template that is exposed through a directive that uses bootstrapvalidator to validate some of the form fields.  The form fields have special information buttons attached that use a popover to provide further guidance about each field.</p>
  
  <p>The problem I'm having is that the popovers do not fire when the trigger button is inside the template from the directive, but they work fine if the button is outside of the directive as illustrated in the Plunk below. </p>
  
  <p>Please check this Plunk for all the code:</p>
  
  <p><a href="http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview" rel="nofollow">http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview</a></p>
  
  <p>The main directive:</p>
  
  <pre><code>(function(angular) {
  'use strict';
  angular.module('appointmentsApp', ['ui.bootstrap'])
  
  .controller('appointmentsController', ['$scope', function($scope) {
    var vm = this
    $scope.form = 'frmPrimarySecondaryMedicalInsurance',
    $scope.test = {
      description: 'Test application'
    };
  }])            
  .directive('medicalInsuranceForm', function() {
  
    return {
      restrict: 'E',
      scope: {},
      templateUrl: 'medical-insurance-form.tpl.html',
      link: function(scope, form){
        form.bootstrapValidator({
          feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
          },
          fields: {
            txtMedicalInsuranceName: {
              validators: {
                notEmpty:{
                  message: 'Medical insurance name is required.'
                }
              }
            },
            txtPolicyHolderPrimaryInsurance: {
              validators: {
                notEmpty:{
                  message: 'The primary insurance policy holder name is required.'
                }
              }
            }
          }
        });
      }
    };
  });
  })(window.angular);
  </code></pre>
  
  <p>An element from the template:</p>
  
  <pre><code>    &lt;!-- BEGIN: Out of Pocket Payer? --&gt;
      &lt;div id="frmCtrlOutOfPocketPayer"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-6"&gt;
            &lt;label class="control-label" for="txtOutOfPocketPayer"&gt;Out of Pocket Payer?:&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-lg-3"&gt;
            &lt;div class="input-group input-group-sm checkbox-xs"&gt;
              &lt;span class="input-group-btn" id="btnHelp-OutOfPocketPayer"&gt;
                &lt;button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body"
                        popover-placement="top" popover-trigger="popover" popover-title="Out of Pocket Payer?" 
                        popover="Please check this box if consumer states they will not be going through insurance."&gt;
                    &lt;span class="glyphicon glyphicon-question-sign" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/span&gt;
              &lt;input type="checkbox" class="form-control checkbox-inline checkbox-xs" name="txtOutOfPocketPayer" aria-describedby="btnHelp-OutOfPocketPayer" ng-model="vm.outOfPocketPayer" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- END: Out of Pocket Payer? --&gt;
  </code></pre>
  
  <p>The popover directive:</p>
  
  <pre><code>angular.module('appointmentsApp', ['ui.bootstrap'])
      .directive("popoverHtmlUnsafePopup", function () {
        return {
          restrict: "EA",
          replace: true,
          scope: { title: "@", content: "@", placement: "@", animation: "&amp;", isOpen: "&amp;" },
          templateUrl: "popover-html-unsafe-popup.html"
        };
      });
  </code></pre>
  
  <p>The popover template:</p>
  
  <pre><code>&lt;div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
  
    &lt;div class="popover-inner"&gt;
        &lt;h3 class="popover-title" ng-bind="title" ng-show="title"&gt;&lt;/h3&gt;
        &lt;div class="popover-content" bind-html-unsafe="content"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally, the index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Medical Insurance Component&lt;/title&gt;
  
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
    &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="popover.js"&gt;&lt;/script&gt;
  
    &lt;script src="medicalInsuranceForm.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="appointments.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.9.2.custom.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/FontAwesome.otf"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.eot"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.svg"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.ttf"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.woff"&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css"&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="appointmentsApp"&gt;
    &lt;div ng-controller="appointmentsController"&gt;
      &lt;div class="col col-sm-4"&gt;&lt;/div&gt;
      &lt;button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body" 
          popover-placement="bottom" popover-toggle="popover" popover-title="Medical Insurance Name" 
          popover="Insurance company name such as Aetna, Blue Cross, etc."&gt;
          &lt;span class="glyphicon glyphicon-question-sign" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;br/&gt;
      &lt;div class="row"&gt;&lt;/div&gt;
  
      &lt;medical-insurance-form&gt;&lt;/medical-insurance-form&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>