AngularJS: Infinite Scrolling

HTML

<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.name}}</li>
  </ul>  
</div>

CSS

li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
    height: 400px;
    overflow: auto;
}

JavaScript

function Main($scope) {
    $scope.items = [];
    
        $scope.loadMore = function() {
        $http.get('data/ptis/ptis.json').
                success(function(data, status, headers, config) {
                    // this callback will be called asynchronously
                    // when the response is available
                    $scope.items += data;
                }).
                error(function(data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                    console.log("call failed");
                });
    };
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

<!-- 
    this is the structure of the json file
    [{   "name": "summix_demo", "team": "CC-DFFGGG", "releaseTichet": "REL-2334rre441", "expiryDate": "15/10/2014", "creationDate": "10/09/2014", "toClean": "yes"},
{   "name": "ui-grid-render-container ng-isolate-scope ui-grid-render-container-body", "team": "ACC", "releaseTichet": "REL-244e31", "expiryDate": "15/10/2014", "creationDate": "10/09/2014", "toClean": "no"},
{   "name": "ui-grid ng-isolate-scope grid1426238736787", "team": "ACC-SADFD", "releaseTichet": "REL-24432r4321", "expiryDate": "15/10/2014", "creationDate": "10/09/2014", "toClean": "yes"}] -->