pagination with angularjs, same data displayed in all pages

Question

I have problem with my live search function in angularjs app: http://www.monde-du-rat.fr/zombieReport/#/ratousearch

Data is correctly retrieved by my factory , and first page is displayed, but when i click for go next or previous, filter seems doesnt' work, data is the same.

My ctrl

    /* INIT pagination */
    $scope.currentPage = 0;
    $scope.pageSize = 7;

    /* AJAX lordREST QUERY : calling lord watching */
    $scope.change = function() {
        if ($scope.myFormZR_lord.$valid) {

            // RETRIEVE DATAS
            var dataSearch = $scope.myForm_lord.search;
            var dataParam = $scope.myForm_lord.param['value'];

            // CONSOLE LOG CONTROL
            console.log($rootScope.defineCLC + "Search requested with params : " + dataParam  + " : " + dataSearch);

            lordREST.query({search: dataSearch, param: dataParam}, function(response) { 

                // CONSOLE LOG CONTROL
                console.log($rootScope.defineCLC + "number of results : " + response.length);

                /* 1 : test if not empty */
                if (response.length >= 1) {

                    // ng-show things
                    $scope.successLordZR = true;
                        $scope.failLordZR = false;

                    // populate scope
                    $scope.posts = $filter('startFrom')(response, $scope.currentPage*$scope.pageSize);

                    // pagination , calcul of numberOfPages
                    $scope.numberOfPages = function() {
                        return Math.ceil(response.length/$scope.pageSize);                
                    }
                    console.log($rootScope.defineCLC + "number of pages : " + Math.ceil(response.length/$scope.pageSize));

                } else {
                    // 
                }

            });


        } else {
//
        }
    }

and html part :

            <div id="pagination">
                <div class="myLeft">
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage == 0" ng-hide="posts.length <= 7" ng-click="currentPage = 0">{{ 'TRS_CTRL3_FIRST' | translate }}</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1"><i class="fa fa-arrow-circle-o-left"></i>&nbsp;&nbsp;{{ 'TRS_CTRL3_PREV' | translate }}&nbsp;</button>
                </div>
                <div class="myCenter">
                    {{currentPage+1}}/{{numberOfPages()}}
                </div>
                <div class="myRight">
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage >= posts.length/pageSize - 1" ng-click="currentPage = currentPage + 1">&nbsp;{{ 'TRS_CTRL3_NEXT' | translate }}&nbsp;&nbsp;<i class="fa fa-arrow-circle-o-right"></i></button>
                    &nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage >= posts.length/pageSize - 1" ng-hide="posts.length <= 7" ng-click="currentPage = numberOfPages() - 1">{{ 'TRS_CTRL3_LAST' | translate }}</button>
                </div>
            </div>

filter :

app.filter('startFrom', function () {
    return function (input, start) {
        if (input === undefined || input === null || input.length === 0) {
            return [];
        } else {
            start = +start; //parse to int
            return input.slice(start);
        }
    }
});

What's wrong ? you can try "aria" in the search input for testing and see console. There is no errors, so i think it's a problem of my pagination part but the html or filter ?

Answer 1

You need to apply your startFrom filter with ngRepeat, not just call it once when you're getting the data. Try this:

<li class="list-group-item ng-scope" ng-repeat="post in posts | orderBy:'name' | startFrom:currentPage*pageSize | limitTo:pageSize" ng-if="posts">

and change

$scope.posts = $filter('startFrom')(response, $scope.currentPage*$scope.pageSize);

to

$scope.posts = response;