how to use ngInfiniteScrol?

Question

i am using ngInfiniteScrol in angular js my js function is

$scope.busy = false;
    $scope.nextPage = function() {
         if ($scope.busy) return;
        var checkLast = $("#endlistings").val();
        var off_set = $("#offSet").val();
        var offsetCounter = parseInt($("#offSetCounter").val()) - parseInt(10);
        newrec = parseInt(off_set) + 10;
        if (off_set >= 10 ){
            $scope.busy = true;
            console.log("if");
            var url = CONFIG.APIURL + "Deployed_pets/getDeployedPetsResults/" + off_set + "/" + offsetCounter;
            $http.get(url).success(function(data) {
               angular.extend($scope.deployed_pets, data.deployed_pets);
               $("#offSet").val(newrec);
              $scope.busy = false;
            });
        }
    };

and my html file is

<div class="row" infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='1'>
    <div class="col-sm-6"  ng-repeat="deployedpet in deployed_pets">
        {{data}}
    </div>
    <div ng-show='busy'>Loading data...</div>
</div>

after first time when i scroll down it works correctly but after first time when i scroll downwards it keeps on loading data