Simple Angular Directive Infinite Scroll

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" type="text/javascript"></script>
    <script src="script.js"></script>
  </head>

<body ng-app="testApp" ng-controller="MainCtrl">
  <div class="items" infinity-scroll="loadMore(limit)">
    <div ng-repeat="item in items" style="border:1px solid #000; padding:20px;">
      <span ng-bind="item.name"></span>
    </div>
  </div>

</body>

</html>

var testApp = angular.module('testApp', [])
.controller('MainCtrl', function($scope, $rootScope) {
  $scope.number = 1;
  $rootScope.per_page = 50;
  $rootScope.limit = $rootScope.per_page;
  $scope.items = [];
  
  $scope.loadMore = function(limit){
    for($scope.number; $scope.number <= limit; $scope.number++){
      $scope.items.push({
        'name' : 'Item ke-'+$scope.number
      });
    }
  }
  $scope.loadMore($rootScope.per_page);
  
}).directive('infinityScroll', function() {
    return function(scope, element, attr) {
      var raw = element[0];
      element.bind('scroll', function () {
          if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
              scope.$root.limit = scope.$root.limit+scope.$root.per_page;
              scope.$apply(attr.infinityScroll);
          }
      });
    };
});

.items {
    position: absolute;
    height: 100%;
    overflow: scroll;
    width:95%;
}