AngularJS NgInfiniteScroll displays initial list, but will not update

Question

I'm trying to get a table that will add new entries as I scroll down the page on my website. However, while I have gotten my initial list to appear, they will not update. How would I get the list to update as I scroll down? Code is below:

View:

 <table border = "3" ng-init="users()" >
    <div infinite-scroll='loadMore()' infinite-scroll-distance='3'>
        <tr ng-repeat = "y in images track by $index">
            <td>{{y.username}}</td>
            <td>{{y.appId}}</td>
            <td>{{y.aaid}}</td>
        </tr>
    </div>

</table>

Controller:

var userurl = '';
    var images = [];
    var returnUsers = [];


    $scope.users = function(){

        userurl = 'http://localhost:8085/rest/uafapp/userlisttest';
        var userdata = [];
        var userconfig =
        {
            headers: {
                'Content-Type':'application/json'
            }
        };
        var userPostRequest = $.get(userurl, userdata, userconfig);
        var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
        userPostRequest.done(function(userdata){

            userjson = JSON.stringify(userdata);
            userjson = userjson.replace(/\\"/g, '"');
            userjson = userjson.replace(/\"{/g, '{');
            userjson = userjson.replace(/}\"/g, '}');

            //console.log("userjson :: " + userjson);
            var postResponse = jQuery.parseJSON(userjson);
            returnUsers = postResponse['users'];
            $scope.returnUsers = returnUsers;
            //console.log(JSON.stringify($scope.returnUsers));
            $scope.$apply()

        })
        $.when(userPostRequest).done(function(){
            images = [returnUsers[Object.keys(returnUsers)[0]],
                returnUsers[Object.keys(returnUsers)[1]],
                returnUsers[Object.keys(returnUsers)[2]],
                returnUsers[Object.keys(returnUsers)[3]] ];

            //console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[0]]));
            //console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[1]]));
            //console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[2]]));
            //console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[3]]));

            $scope.images = images;

            var last = images.length;
            console.log("------- loop and index: " +  last);

            $scope.$apply()
        });

    };

    $scope.loadMore = function() {
        console.log("first thing inside the loadMore method");
        var last = images.length - 1;
        console.log("before the loop and index: " +  last);
        for(var i = 1; i <= 5; i++) {
            console.log("inside the loop " + i);
            images.push(returnUsers[Object.keys(returnUsers)[last + i]]);
        }
        $scope.images = images;
        $scope.$apply();
    };

Answer 1

You're overwriting your $scope.images array, instead of append. You must use the concat method to, of course, append the old items with the new ones.

Then, inside your loadMore() function, just change this:

$scope.images = images;

for:

$scope.images = $scope.images.concat(images);

I hope it helps!!