Scroll + limitTo

by bmleite

HTML

<div class="box" ng-controller="Ctrl" scroll-position>
  <div ng-repeat="user in users | limitTo:display_limit">{{user.name}}</div>
<div>

CSS

.box {
  background-color: #eee; 
  height: 250px;
  overflow-y: auto;
}

JavaScript

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

function Ctrl($scope) {
  $scope.display_limit = 100;
  $scope.users = [];
  (function () {
    for (var i = 0; i < 1000; i++) {
      $scope.users.push({
        name: i
      });
    }
  })()
}

app.directive('scrollPosition', function ($window) {
  return function (scope, element, attrs) {      
    var w = element[0];
    //var w = $window;
    angular.element(w).bind('scroll', function () {                  
      scope.$apply(function () {                
        if (w.scrollTop + w.offsetHeight >= w.scrollHeight) {          
          scope.display_limit = scope.display_limit + 50;
        }
      });
    });
  }
});