Ionic infinite scroll is not working with ngResource API query()

ionic-v1
1

Hi,

We are using Laravel 5 API at server side and ngResource in Ionic to make API calls. The infinite scroll is initiating API calls perfectly but it’s unable pull, iterate and displaying it on the app. We are using ng-repeat for iteration. Initial call is showing first 5 results perfectly. But infinite call is unable to iterate the loop and displaying the results.

Initial call and results Image: Here you can find first card is initial call and getting data. second one is coming after infinite scroll call and id and location is not displaying.

image
err1.PNG1024×930 103 KB

Data Set Image:

image

Here is my code.

View:

<ion-view view-title="Sources">
    <ion-content lazy-scroll>
        <ion-refresher pulling-text="Pull to refresh..."
                       on-refresh="doRefresh()">
        </ion-refresher>
        <ion-list>
            <div class="padding-horizontal">
                <div class="list card" ng-repeat="source in sources.data track by $index">

                    <div class="item item-image">
                        <a>
                            <img ng-if="source.image" image-lazy-src="http://10.10.1.106:8000/uploads/source_images/thumbs/medium/{{source.image}}" err-SRC="img/not-found.png" class="bg-dark" height="200" image-lazy-loader="android" image-lazy-distance-from-bottom-to-load="100" />

                            <div ng-if="!source.image" class="padding bg-dark p-t-10 p-b-10">
                                <div class="padding">No Source Image Found</div>
                                <i class="ion ion-android-camera padding f25"></i>
                                <div class="padding">Tap Here to Capture</div>
                            </div>
                        </a>
                    </div>

                    <div class="item item-body">
                        <h2 class="no-margin"><strong>ID: {{ source.name}} {{ source.data.name}}</strong></h2>
                        <p>
                            <strong>Location:</strong> {{source.location}}
                        </p>
                    </div>
                    <div class="item item-divider">
                        <a class="button button-small button-positive" ui-sref="app.viewSource({id:source.id})"><i class="ion ion-eye"></i> View Details</a>
                    </div>

                </div>
                </div>
        </ion-list>
        <ion-infinite-scroll  immediate-check="false" ng-if="!noMoreItemsAvailable" on-infinite="loadMore(sources.current_page, sources.last_page)" distance="1%"></ion-infinite-scroll>
    </ion-content>
</ion-view>

controller.js

.controller('SourcesCtrl', function ($scope, $http, $state, $stateParams, Sources, $ionicPopup, $ionicLoading) {
    
    $scope.sources = Sources.query();

    console.log($scope.sources);

    $scope.noMoreItemsAvailable = false;

    $scope.loadMore = function (page,lastpage) {

        console.log("Load More Called");
        console.log("Page = "+page);
        console.log("Page = " + lastpage);
        $scope.sources.current_page = page + 1;

        var data = Sources.query({ page: $scope.sources.current_page });

        if (page == lastpage-1) {
            $scope.noMoreItemsAvailable = true;
        }

        //angular.extend(data.data, $scope.sources.data);


        $scope.sources.data.push(data.data);

        console.log(data);

        $scope.$broadcast('scroll.infiniteScrollComplete');

    };

    $scope.doRefresh = function () {
        $scope.sources = Sources.query();
        $scope.$broadcast('scroll.refreshComplete');
    }

})

services.js

.factory('Sources', function ($resource) {
    return $resource('http://10.10.1.106:8000/api/sources/:id', { id: '@_id', page: '@_page' }, {
        update: {
            method: 'PUT'
        }, 
        delete: {
            method: 'DELETE'
        },
        query : { method: 'GET', isArray: false },
        get: { method: 'GET', isArray: false }

    });
})

Please kindly suggest any solution. Thank you.