Template Popover for Angular-UI Bootstrap

exampleUsage.html

<div ng-app="myModule">
    <script type="text/ng-template" id="myTemplatePopover.html">
    	<div ng-controller="PopoverTestCtrl">
    		<span>Is it not <b style="color:red;">glorious</b> to have <i>html</i> in a popover?</span>
    		<span>{{ theStuff }}</span>
        <button class="btn btn-danger" ng-click="$popover.close()">Try closing here!</span>
    	</div>
    </script>
  
	  <button class="btn btn-success" template-popover="myTemplatePopover.html" template-popover-title="I'm a title!" template-popover-placement="bottom">You can have popovers with templates too!</button>
</div>

exampleUsage.js

angular.module('myModule', ['ui.bootstrap']);

(function(myModule) {
  'use strict';
  
  myModule.controller('PopoverTestCtrl', function($scope) {
    $scope.theStuff = "Binding stuff is cool too!";
  });
})(angular.module('myModule'));

template-popover.html

<!-- My path is actually template/popover/template-popover.html -->

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

  <div class="popover-close" ng-click="$popover.close($event)" aria-hidden="true"><i class="ficon ficon-cross"></i></div>

  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>

  <div class="popover-content" ng-include="content"></div>
</div>

templatePopover.js

(function(myModule) {
  'use strict';
  myModule.controller('templatePopoverPopupCtrl', function($scope) {
    this.close = function($event) {
      if ($event && $event.stopPropagation) {
        $event.stopPropagation();
      }
      $scope.$parent.close();
    };
  })

  .directive('templatePopoverPopup', function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        title: '@',
        content: '@',
        placement: '@',
        animation: '&',
        isOpen: '&'
      },
      templateUrl: 'template/popover/template-popover.html',
      controller: 'templatePopoverPopupCtrl',
      controllerAs: '$popover'
    };
  })

  .controller('templatePopoverCtrl', function($scope) {
    $scope.close = function() {
      $scope.tt_isOpen = false;
    };
  })

  .directive('templatePopover', [ '$tooltip', function ($tooltip) {
    var toolTip = $tooltip('templatePopover', 'templatePopover', 'click');
    toolTip.controller = 'templatePopoverCtrl';
    return toolTip;
  }]);

})(angular.module('myModule'));

If you want to see it in action http://codepen.io/boomtownroi/pen/GscBJ