Angularjs Pagination With Bootstrap

<!DOCTYPE html>
<html ng-app="appModule">

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    
    <script src="app.js"></script>
    <script src="pagination.js"></script>
  </head>

  <body ng-controller="appController">
    <div style="margin: auto;width: 50%">
        <list-pagination datasource="datasource"
                         num-per-page="{{numPerPage}}"
                         list-title="{{'Pagination Demo'}}">
            <img ng-src="http://placehold.it/{{divWidth}}x50&text={{item.name + item.id}}">
        </list-pagination>
    </div>
</body>

</html>

(function(){
    angular.module('appModule',['paginationModule'])
        .controller('appController',function($scope){
            $scope.maxItemsLength = 200
            $scope.numPerPage = 10
            $scope.datasource = []
            $scope.init = function(){
                for (var i = 0;i < $scope.maxItemsLength;i++){
                    $scope.datasource.push({
                        name: 'a',
                        id: i
                    })
                }
            }
            $scope.init()
        })
})()

(function(){
    angular.module('paginationModule',['ui.bootstrap'])
        .filter('sliceData',function(){
            return function(input,start,end){
                return input.slice(start,end)
            }
        })
        .directive('listPagination',function(){
            return{
                restrict: 'E',
                scope:{
                    listTitle: '@',
                    datasource: '=',
                    numPerPage: '@'
                },
                transclude: 'true',
                templateUrl: 'listview.html',
                link: function(scope,elem,attrs){
                    scope.divWidth = document.getElementById('myDiv').offsetWidth -60
                    scope.numOfTotalItems = scope.datasource.length
                    scope.initPerPage = 5
                    scope.itemStart = 0
                    scope.itemEnd =  scope.numPerPage
                    scope.$watch('numPerPage',function(newVal){
                        if (newVal) {
                            scope.itemEnd = newVal
                        }
                    })
                    scope.pageChanged = function(){
                        scope.itemStart = (scope.currentPage - 1)*scope.numPerPage
                        scope.itemEnd = scope.currentPage * scope.numPerPage
                    }
                    scope.getNumPerPage = function(){
                        if (!scope.numPerPage) scope.numPerPage = scope.initPerPage
                        return scope.numPerPage
                    }
                }
            }
        })
        .directive('inject',function(){
            return{
                restrict: 'A',
                link: function (scope, element, attrs, ctrl, transcludeFn) {
                    if (!transcludeFn) return;
                    transcludeFn(scope, function (clone) {
                        element.empty();
                        element.append(clone);
                    });
                }
            }
        })
})()

<div class="panel panel-info">
    <div class="panel-heading"><h3>{{listTitle}}</h3> </div>
   
    <div id="myDiv">
        <li class="list-group-item" ng-repeat="item in datasource|sliceData:itemStart:itemEnd">
            <div ng-transclude inject></div>
        </li>
    </div>
    <div class="panel-heading" align="center">
        <pagination total-items="numOfTotalItems" items-per-page="getNumPerPage()" ng-model="currentPage"
                    ng-change="pageChanged()"></pagination>
    </div>
</div>