Infinite Pagination using Angular Directive

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


app.directive("myScroller", function ($parse, $document) {
    var _levelReached = function(){
            // is it low enough to add elements to bottom?
            var pageHeight = Math.max(document.body.scrollHeight ||
              document.body.offsetHeight);
            var viewportHeight = window.innerHeight  ||
              document.documentElement.clientHeight  ||
              document.body.clientHeight || 0;
            var scrollHeight = window.pageYOffset ||
              document.documentElement.scrollTop  ||
              document.body.scrollTop || 0;
            // Trigger for scrolls within 20 pixels from page bottom
            return pageHeight - viewportHeight - scrollHeight < 30;
          };
    return {
        scope: {
            localFn: '&myScroller'
        },
        link: function (scope, element, attributes) {
            $document.bind('scroll', function () {
                if (scope.$apply(_levelReached)) {
                    scope.localFn();
                }
            });
        }
    }
});

app.controller('JobsCtrl', function ($scope, $http) {
    $scope.jobs = [];
    $scope.from = 0;
    $scope.getJobs = function () {
        var url = 'http://192.168.1.109:9200/jobs/_search?from='+$scope.from+'&size=150&q=python';
        $http.get(url)
            .success(function (data) {
                console.log(data);
                data.hits.hits.forEach( function (hit) {
                    $scope.jobs.push(hit._source.desc);
                });
                $scope.from += 50;
            })
    }
    $scope.getJobs();
});