How to implement a infinite scroll with http request?

Question

I am currently writing a webapp angularjs where I get an array of objects, rather long. I use nested ng-repeat to display the objects in my index. I have used infinite scroll like Facebook. When you are in the bottom of the page, it make a http get request for more objects.

I have tried to use these two libraries, but I 'm really confused

1: http://lorenzofox3.github.io/lrInfiniteScroll/

2: http://binarymuse.github.io/ngInfiniteScroll/demo_async.html

This is my nested ng-repeat

               <div ng-repeat="monthi in monthedIncidents"  ng-hide="showme">
<div style="width: 100%;">
    <h3>{{monthi.name}}</h3>
        <div class="line-separator"></div>
</div>
<ul class="list">
    <li class="list__item" ng-repeat="incident in monthi.incidents">
        <!-- ngrepeat: mostrar total de incidentes-->
        <a href="#" data-toggle="modal" data-target="#incidentModal" ng-click="selectIncident(incident.index)">
            <!-- /.badgetSection-->
            <figure class="list__item__inner">
                <div class="bagdets">
                    <span class="glyphicon glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span>
                    <span class="glyphicon glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span>
                </div>
                <!-- ./badges -->
                <div class="hoverMask"></div>
                <div class="incident-image">
                    <img ng-src="{{incident._links.thumbnail.href || 'img/03.jpg'}}">
                    <p class="incident-type"><span>{{incident._embedded.incident_type}}</span>
                    </p>
                </div>
                <figcaption>
                    <p>{{incident.name}}</p>
                    <p>{{incident.id}}</p>
                    <div class="line-separator"></div>
                    <p id="description">{{incident.description | strLimit: 90 }}</p>
                    <div class="line-separator"></div>
                    <p><span class="glyphicon glyphicon-calendar"></span> {{incident.upload_date | date:'EEE - dd/MM/yyyy '}} <span class="glyphicon glyphicon-time"></span> {{incident.upload_date | date:'hh:mm:ss a '}}</p>
                    <div class="line-separator"></div>
                    <p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p>
                </figcaption>
            </figure>
        </a>
    </li>
    <!-- /.list__item -->
</ul>
<!-- /.list -->

and this is my Controller:

app.controller("IncidentIndexCtrl", function ($resource, $scope, Incident, Device, IncidentType, $http, $window) {
/*Obtener todos los incidentes*/
$scope.reloadIncidents = function () {

    Incident.getIncidents({

        startdate: $scope.startDateResult,
        enddate: $scope.endDateResult,
        description: $scope.descriptionResult,
        incidentType: $scope.incidentTypeResult,

    }, function (data) {
        $scope.incidents = data._embedded.incidents;


        var monthIncidents = [];

        for (var i in $scope.incidents) {
            var month = new Date($scope.incidents[i].upload_date).getMonth();

            if (!monthIncidents[month]) {
                monthIncidents[month] = {
                    name: $scope.months[month],
                    incidents: []
                };
            }

            var incident = $scope.incidents[i];
            incident.index = i;

            monthIncidents[month].incidents.push(incident);
        }

        $scope.monthedIncidents = [];

        for (var e in monthIncidents) {
            $scope.monthedIncidents.push(monthIncidents[e]);
        }

    });


};

$scope.reloadIncidents();

$scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

startdate: $scope.startDateResult enddate: $scope.endDateResult description: $scope.descriptionResult incidentType: $scope.incidentTypeResult

These values are only used to manipulate this URL: http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4

JSON array provides me the url for the next object, depending on the limit

{
"offset": 0,
"limit": 4,
"_links": {
    "self": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0"
    },
    "first": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0"
    },
    "next": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=4"
    }
}

Answer 1

Try this:

View:

<div infinite-scroll="find()" infinite-scroll-disabled="busy || stopScroll" infinite-scroll-distance="1"><!-- Your content --></div>

Controller:

    var count = 5;
    var page = 1;
    $scope.busy = false;
    $scope.stopScroll = false;


    $scope.find = function() {
        if ($scope.busy) return;
        $scope.busy = true;

        //HERE the Restfull action. With pagination. Pass a callback
        //...

        function callback(res){
            $scope.total = res.length;
            if(count*page>=$scope.total) $scope.stopScroll = true;
            page++;
            $scope.busy = false;
        }   

        });
    };