jquery - Why changing AngularJS variable successfully but having no effect? -

this question has answer here:

• bind class toggle window scroll event 6 answers

i trying make infinite-scrolling table. have:

<tr ng-repeat="x in names | limitto:quantity">     <td>{{ x.density }}</td>     <td>{{ x.pressure }}</td> <tr> 

at end of table have load more button. works ok:

<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> 

while has no effect:

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

the weirdest thing is, if delete loadmore() , use window.onscroll function , keep button, doesn't show more result on scroll bottom starts work if click button. yes, if have no loadmore() function! sure window.onscroll firing on bottom because $scope.quantity keeps increasing.

i using jquery mobile if has problem. don't think because works fine on button click.

how make work window.onscroll function?

that's because onscroll code isn't running inside angular digest, detects changes , updates views, notifies watchers, etc ...

you should put onscroll logic inside directive , this: https://stackoverflow.com/a/14880862/93321