Почему изменение переменной AngularJS прошло успешно, но безрезультатно? [Дубликат]

Я пытаюсь сделать бесконечно-прокручиваемую таблицу. У меня есть:

<tr ng-repeat="x in names | limitTo:quantity">
    <td>{{ x.Density }}</td>
    <td>{{ x.Pressure }}</td>
<tr>

В конце таблицы у меня есть кнопка больше загрузки. Это работает нормально:

<button class="btn" ng-click="loadMore()">Load more</button>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('customersCtrl', function($scope) {
    $scope.quantity = 7;
    $scope.loadMore = function () {   
        $scope.quantity += 7; 
    }
    $scope.names = <?php echo json_encode($records); ?>;
});
</script>

Хотя это не имеет никакого эффекта:

window.onscroll = function () {   
   if($(window).scrollTop() + window.innerHeight == $(document).height()){
        $scope.quantity += 7; 
   }
}

Самое странное, если я удаляю loadMore() и использую только функцию window.onscroll и сохраняю кнопку, она не показывает больше результата при прокрутке вниз, но начинает работать, если я нажму кнопку. Да, даже если у меня нет функции loadMore() ! Я уверен, что window.onscroll $scope.quantity внизу, потому что $scope.quantity продолжает расти.

Я использую jQuery mobile, если это имеет какое-либо отношение к проблеме. Я не думаю, что это происходит, потому что он отлично работает при нажатии кнопки.

Как заставить эту работу работать только с функцией window.onscroll?