AngularJS: Infinite Scrolling (updated 2014-01-09)

Infinite scrolling without of whole page, not just the container. Works with and without padding/margin of BODY and other tags. Credits to evaneus (https://groups.google.com/d/msg/angular/dJSgT4bmiOI/qAyvK85V6q4J)

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<!--
 NOTE: Under "Fiddle Options" on the left the following line is used:
 <body ng-app="maxhq.infinite-scroll" ng-controller="Main">
 -->
<div on-scrolldown="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

CSS

li {
    height: 120px;
    border-bottom: 1px solid gray;
    text-align: center;
    font-size: 48pt;
    font-weight: bold;
    color: #AAA;
}

JavaScript

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

var mod = angular.module('maxhq.infinite-scroll', []);

mod.directive('onScrolldown', function() {
    return function(scope, elm, attr) {
        debugger;
        var raw = elm[0]; // get the DOM element out of the jqLite wrapping
        
        var scrolldown = function() {
            var rectObject = raw.getBoundingClientRect();
            if (rectObject.bottom <= window.innerHeight) {
                scope.$apply(attr.onScrolldown); // execute function stored in "onScrolldown"
            }
        };
        
        // listen to scrolling event
        angular.element(window).on('scroll', scrolldown);
        
        // unregister event handler when user switches to another location
        // within the AngularJS app
        scope.$on('$locationChangeSuccess', function(event) {
        	angular.element(window).off('scroll', scrolldown);
       	});
    };
});