uib pagination resets paging on total-times update

[sterlp]

Bug description:

This issue is very close to issue: https://github.com/angular-ui/bootstrap/issues/620

I have a pager like:

<ul uib-pagination max-size="5" 
            total-items="ctrl.homes.page_status.total_elements" 
            ng-model="ctrl.query.page" 
            items-per-page="ctrl.query.size" ng-change="ctrl.reload()"></ul>

As soon I page to the next page and this one gets reloaded successfully the pager requests to load page 1 again.

If I adjust the code too:

<ul uib-pagination max-size="5" 
            total-items="10" 
            ng-model="ctrl.query.page" 
            items-per-page="ctrl.query.size" ng-change="ctrl.reload()"></ul>

The problem is gone. Basically it seems that the pager has issues if the total-items counts gets updated in the reload method.

this.reload = function() {
    console.info("reload ...", this.query);
    this.homes = $v1Home.query({page: this.query.page - 1, size: this.query.size, search: this.query.search, sort: 'name'});
};

services.factory('V1_HomeService', ['$resource', '$config', 'ServiceFunctions', function($resource, $cfg, $fn) {
        return $resource($cfg.v1Prefix + '/home/:homeId', {homeId: "@homeId"}, {
            'get' : {method: 'GET'},
            'query' : {method: 'GET', isArray: false},
            'remove' : {method: 'DELETE'}
        });
    }]);

The pager is back to page 1, will be very short on page two, well until the data arrives from the backend.

Please note that the value of ctrl.homes.page_status.total_elements stays in the end the same, well the home is updated of course.

Link to minimally-working plunker that reproduces the issue:

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8 UIBS: 2.2.0 Bootstrap: 3.3.6

[sterlp]

First load, as reaction on the click:

Second load, as reaction of the model update:

[sterlp]

Problem seems to be the unresolved promise returned by angularjs by default. Adjusting the query code as followed:

$v1Home.query({page: this.query.page - 1, size: this.query.size, search: this.query.search, sort: 'name'}, function(data) {
    that.homes = data;
});

fixes the issue. The total is for the time the query is pending "undefined" and changes of course as soon as the data arrives. Important to note is that the widget does then a paging back, as the "newTotal" is now a number and the "oldTotal" is undefined. Which seems in the end to be the root cause for this misbehavior.

[wesleycho]

Going to close this as a usage issue, as this does not appear to be a UI Bootstrap issue - it is important to note that when using Angular 1, what data gets bound to the view has significance as to how directives/components react to the data change.

[dev-anees]

Hi @sterlp , I'm facing the same issue while paginating a table. Could you please tell me how you fixed it??

[sterlp]

@anees715 you have two options -- either as I described above to work around the issue or to adjust the pager code, that it ignores totals which aren't a number. As mentioned above the default result is a "unresolved promise" so long the total is undefined after angular resolves the promise the pager does a reload.

I think this is a misbehavior -- as a reload make no sense to me -- but this is a personal taste how it should work, without knowing the details if it may make sense it some other cases.