Angularjs Infinite Scroll delegate to directive listview

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

  <head>
    <link 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="app.js"></script>
    <script src="infinitescroll.js"></script>
    <link rel="stylesheet" href="style.css" >
    
  </head>

  <body ng-controller="appController">
    <div style="margin: auto;width:50%">
    <list-infinitescroll datasource="datasource"
                         list-title="{{'Infinite Scroll Demo'}}"
                         do-load-more="doLoadMore"
            >
        <div>
            <img ng-src="http://placehold.it/{{divWidth}}x100&text={{item.name + item.id}}" >
        </div>
    </list-infinitescroll>
</div>
  </body>

</html>

/* Styles go here */

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

(function () {
    angular.module('appModule', ['infinitescrollModule'])
        .controller('appController', function ($scope) {
            $scope.oneceToShow = 20
            $scope.datasource = []
            $scope.init = function () {
                $scope.sourcePush(0, $scope.oneceToShow)
            }
            $scope.doLoadMore = function () {
                var start = $scope.datasource.length
                var end = start + $scope.oneceToShow
                $scope.sourcePush(start, end)
            }
            $scope.sourcePush = function (start, end) {
                for (var i = start; i < end; i++) {
                    $scope.datasource.push({
                        name: 'a',
                        id: i
                    })
                }
            }
            $scope.init()
        })

})()

(function () {
    angular.module('infinitescrollModule', [])
        .directive('listInfinitescroll', function () {
            return{
                restrict: 'E',
                scope: {
                    listTitle: '@',
                    datasource: '=',
                    doLoadMore: '=',
                },
                transclude: 'true',
                templateUrl: 'listview.html',
                link: function (scope, element, attrs) {
                   scope.divWidth = document.getElementById('myDiv').offsetWidth -60
                    scope.loadMore = function () {
                        if (scope.doLoadMore)  scope.doLoadMore()
                    }
                }

            }
        })
        .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);
                    });
                }
            }
        })
        .directive('whenScrollBottom', function () {
            return function (scope, elem, attr) {
                var scrollBar = elem[0]
                elem.bind('scroll', function () {
                    if (scrollBar.scrollTop + scrollBar.offsetHeight >= scrollBar.scrollHeight) {
                        scope.$apply(attr.whenScrollBottom);
                    }
                })
            }
        })
})()

<div class="panel panel-success">
    <div class="panel-heading"><h3>{{listTitle}}</h3> <div class="list-group-item" align="center" ng-show="isBusy"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...</div></div>
    <div id="myDiv" style="overflow: auto;max-height: 600px" when-scroll-bottom="loadMore()">
        <li class="list-group-item" ng-repeat="item in datasource">
            <div ng-transclude inject></div>
        </li>
    </div>

</div>