AngularJS UI Bootstrap "extension" - Popover with bindable HTML template!

example-template.html

<p>Here comes the <b>bindable HTML</b> popover contents!!!</p>
<p>Number: {{number}}</p>

example.html

<div ng-init="number = 108">
  <button popover-template="example-template.html" class="btn">Example</button>
</div>

popover-template.html

<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"></div>
  </div>
</div>

popover_extension.js

angular.module( 'ui.bootstrap.popover' )
.directive( 'popoverTemplatePopup', [ '$templateCache', '$compile', function ( $templateCache, $compile ) {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: 'template/popover/popover-template.html',
    link: function( scope, iElement ) {

      var content = angular.fromJson( scope.content ),
          template = $templateCache.get( content.templateUrl ),
          templateScope = scope,
          scopeElements = document.getElementsByClassName( 'ng-scope' );

      angular.forEach( scopeElements, function( element ) { 
        var aScope = angular.element( element ).scope();
        if ( aScope.$id == content.scopeId ) {
          templateScope = aScope;
        }
      });

      iElement.find('div.popover-content').html( $compile( template )( templateScope ) );
    }
  };
}])
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
  var tooltip = $tooltip( 'popoverTemplate', 'popover', 'click' );

  tooltip.compile = function() {
    return {
      'pre': function( scope, iElement, iAttrs ) {
        iAttrs.$set( 'popoverTemplate', { templateUrl: iAttrs.popoverTemplate, scopeId: scope.$id } );
      },
      'post': tooltip.link
    };
  };

  return tooltip;
}]);

The same here Rawry... Any chance of reproduce it on JSFIDDLE?