AngularJS - A simple infinite scroll

Question

I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/ I've been able to display the first 5 pieces of data, however on scroll, the further items are not being displayed. HTML: ```

{{ i.Title }}

``` 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", functio…

Accepted Answer

There are two problems. First of all, what is `attr.whenScrolled`? Its undefined. Second one - `limitTo: 5`. You will allways show only 5 elements! Here you have working code: http://plnkr.co/edit/VszvMnWCGb662azo4wAv?p=preview What was changed? Your directive is called `directiveWhenScrolled` so call: ``` scope.$apply(attr.directiveWhenScrolled); ``` instead of ``` scope.$apply(attr.whenScrolled); ``` How lets deal with static limit. Change it into variable (remember about defining default value): ```

``` And now your `loadMore` function should look like this: ``` $scope.loadMore = function() { $scope.limit += 5; }; ```

AngularJS - A simple infinite scroll

Solution

Problem