ui bootstrap popover template

by Divya Manu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<div ng-app="testapp">
    <div ng-controller="testCtrlr">
        <div mdpagination pages="pages" > </div>
    </div>
      <script type="text/ng-template" id="temp"> 
<div>
  {{pages}}
</div>
        
    </script>
</div>

JavaScript

var MyDirectives = angular.module('testapp', ['ui.bootstrap']);

MyDirectives.controller('testCtrlr',['$scope', function($scope){
    $scope.pages = 'hover me to get popover';
    $scope.a=[{"x":"q"},{"x":"1"},{"x":"2"},{"x":"3"}];
}]);

MyDirectives.directive("mdpagination", function(){
        return {
        template: '<h1><a  popover-placement="bottom" popover-template="\'temp\'"  popover-trigger="mouseenter">{{pages}}</a></h1>',
        replace: true,
        restrict: 'A',
       // scope: {pages:'@'}, //default
        link: function(scope, element, attrs){ 
                       console.dir(scope.pages);
        }
    }
});