Estoy tratando de implementar el desplazamiento infinito con ng-infinite-scroll

codigo html original

 <div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'> <ts-result row="row" data-last-result="$last" data-result-section-values="util.data" ng-repeat="row in util.data.results track by $index"> </ts-result> <div more codes </div> </div>

Agregué 'infinite-scroll' y el siguiente código a mi controlador

 $scope.numberToDisplay = 10; $scope.loadMore = function () { alert("loadmore " + $scope.numberToDisplay) if ($scope.numberToDisplay + 5 < vm.data.results.length) { $scope.numberToDisplay += 5; } else { $scope.numberToDisplay = vm.data.results.length; } };

y cambió el código html a

 <div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'> <ts-result row="row" data-last-result="$last" data-result-section-values="util.data" ng-repeat="row in test = (util.data.results |limitTo:numberToDisplay) track by $index"> </ts-result> <div more codes </div> </div>

entonces, ¿dónde debo llamar a loadMore()? Traté de seguir el código de muestra y <div infinite-scroll="loadMore()" infinite-scroll-distance="1"> pero se llamó a loadMore() en bucle hasta numberToDisplay = length antes de que se llenara la pantalla.

 <div id="topMain" ng-if="util.data.results.length > 0" class='txnResults'> <div infinite-scroll="loadMore()" infinite-scroll-distance="1"> <ts-result row="row" data-last-result="$last" data-result-section-values="util.data" ng-repeat="row in test = (util.data.results |limitTo:numberToDisplay) track by $index"> </ts-result> </div> <div more codes </div> </div>

¿Alguna idea? ¡Gracias!