Cannot get an AngularJS popover to work inside a directive's template

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.

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.

Please check this Plunk for all the code:

http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview

The main directive:

(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);

An element from the template:

    <!-- BEGIN: Out of Pocket Payer? -->
    <div id="frmCtrlOutOfPocketPayer">
      <div class="row">
        <div class="col-lg-6">
          <label class="control-label" for="txtOutOfPocketPayer">Out of Pocket Payer?:</label>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3">
          <div class="input-group input-group-sm checkbox-xs">
            <span class="input-group-btn" id="btnHelp-OutOfPocketPayer">
              <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.">
                  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
              </button>
            </span>
            <input type="checkbox" class="form-control checkbox-inline checkbox-xs" name="txtOutOfPocketPayer" aria-describedby="btnHelp-OutOfPocketPayer" ng-model="vm.outOfPocketPayer" />
          </div>
        </div>
      </div>
    </div>
    <!-- END: Out of Pocket Payer? -->

The popover directive:

angular.module('appointmentsApp', ['ui.bootstrap'])
    .directive("popoverHtmlUnsafePopup", function () {
      return {
        restrict: "EA",
        replace: true,
        scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
        templateUrl: "popover-html-unsafe-popup.html"
      };
    });

The popover template:

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" bind-html-unsafe="content"></div>
  </div>
</div>

And finally, the index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Medical Insurance Component</title>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-1.9.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

  <script src="popover.js"></script>

  <script src="medicalInsuranceForm.js"></script>

  <link rel="stylesheet" type="text/css" href="appointments.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css">
  <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">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/FontAwesome.otf">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.eot">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.svg">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.ttf">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.woff">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css">

</head>
<body ng-app="appointmentsApp">
  <div ng-controller="appointmentsController">
    <div class="col col-sm-4"></div>
    <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.">
        <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
    </button>
    <br/>
    <div class="row"></div>

    <medical-insurance-form></medical-insurance-form>

  </div>
</body>
</html>

So, to solve this I first removed the popover directive and the popover template since it turns out they are not needed since I'm already using Bootstrap which, as I understand it, already has popovers and tooltips in it.

I changed the version of jQuery to: jquery-2.0.3.min.js;

Then, I placed the following directive inside the same file as the "main" directive to turn on the popovers and tooltips from Bootstrap.

  .directive('toggle', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      if (attrs.toggle=="tooltip"){
        $(element).tooltip();
      }
      if (attrs.toggle=="popover"){
        $(element).popover();
      }
    }
  };
})

And that was it - it then magically started to work. :-) Check the Plunk for the working version http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview

Next steps are to expose the two-way data from inside the component and to have the popover content pull from ng-model instead of the current hard-coded values.