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

​

app.directive('whenScrolled', function() {

    return function(scope, element, attr) {  

        var containerNode = element[0];

        element.bind('scroll', function() {

            if (containerNode.scrollTop + containerNode.offsetHeight >= containerNode.scrollHeight) {

                scope.$apply(attr.whenScrolled);

            }

        });

    };

});

​

app.controller('MainCtrl', function($scope, $timeout){

   $scope.items = [];

   $scope.busy = false;

   $scope.loadMore = function() {

        if (true === $scope.busy) {

          return;

        }

        $scope.busy = true;

        $timeout(function() {

            var currentLength = $scope.items.length;

            for (var i = currentLength; i < currentLength + 10; i++) {

                $scope.items.push({id: i + 1});

            }

            $scope.busy = false;

        }, 350); // Imitating the lomg remote request.

    };

    $timeout(function(){

      $scope.loadMore();

      // Delayed initial load to see the loading image

    }, 1500);

});