AngularJS - simple endless scroll

Question

I am trying to write a similar small endless scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/

I was able to display the first 5 pieces of data, however when scrolling further items are not displayed.

HTML:

<div id="fixed" directive-when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li>
  </ul>  
</div>

JS:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.items = [
    {
       "Title":"Home"
    },
    {
       "Title":"Contact"
    },
    {
       "Title":"Help"
    },
    {
       "Title":"About"
    },
    {
       "Title":"Our Offices"
    },
    {
       "Title":"Our Locations"
    },
    {
       "Title":"Meet the Team"
    }
    ,
    {
       "Title":"Our Mission"
    },
    {
       "Title":"Join Us"
    },
    {
       "Title":"Conferences"
    },
    {
       "Title":"Tables"
    },
    {
       "Title":"Chairs"
    } 
  ];

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();


});


app.directive("directiveWhenScrolled", function () {
  return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('app', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

Here's the plunker: http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview

Answer 1

There are two problems. First of all, what is attr.whenScrolled? Its undefined. The second is limitTo: 5. You will always show only 5 items!

: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview

? directiveWhenScrolled, :

scope.$apply(attr.directiveWhenScrolled);

scope.$apply(attr.whenScrolled);

. ( ):

<li ng-repeat="i in items | limitTo: limit">{{ i.Title }}</li>

loadMore :

$scope.loadMore = function() {
    $scope.limit += 5;
};