ngInfiniteScroll "load next page" function being called repeatedly

Question

Using the "loading remote data" example from the ngInfiniteScroll website I have tried to implement infinite scrolling. My issue;

The function nextPage() gets called continuously until there are no more records left to load (controlled by an offset value in the SQL query).

I'd appreciate any input on this as I'm rather lost.

Thanks in advance.

HTML

<tbody>
    <div id="infinite_scroll" infinite-scroll='visits.nextPage()' infinite-scroll-disabled='visits.busy' infinite-scroll-distance='1'>
        <tr ng-repeat="visit in visits.items" ng-class="{active: visit.uuid == data.detailItem.uuid}" ng-click="openDetailItem(visit.uuid)">
            <td>{{visit.details.name}}</td>
            <td>{{visit.created_at}}</td>
        </tr>
    </div>
</tbody>

Javascript - AngularJs Factory

angular.module('app').factory('Visits', function(VisitResource) {

// new visits object
var Visits = function () {
    this.items = [];
    this.busy = false;
    this.offset = 0;
};

Visits.prototype.nextPage = function () {

    // busy - stop
    if (this.busy == true) {
        // DEBUG
        console.log('busy test 1.1: ' + this.busy);
        return;
    } else {
        // DEBUG
        console.log('busy test 1.2: ' + this.busy);
    }

    // busy now
    this.busy = true;

    VisitResource.getVisitations({
        limit: 500,
        offset: this.offset
    }, function (response) {

        // stop loading if no data returned
        if(response.data.length == 0) {
            // DEBUG
            console.log('busy test 2: ' + this.busy);
            return;
        } else {
            // DEBUG
            console.log('Payload: ' + response.data.length);
        }

        var _this = this;
        angular.forEach(response.data, function (a_visit) {
            _this.items.push(a_visit);
        });

        // set the last acquired record value
        this.offset = this.items[this.items.length - 1].id;
        // not busy
        this.busy = false;
    }.bind(this));
};

return Visits;
});

Answer 1

As it turns out you can't get vanilla nginfinitescroll to trigger when the container is scrolled as nginfinitescroll is looking at the height of the window.

Here is a link to the answer on SO: angularjs infinite scroll in a container