Variable changing value by itself?

Question

I have a simple angular application that is just a table with pagination and sorting. The changes made to the table (searches, filters, sort ascending/descending, etc..) are reflected in the URL. I do this using ui.router.

When you click a number on the pagination, the table updates properly, and URL shows the correct page number. However, if I take the URL, and visit it directly, it registers the correct number for a second, then resets to 1. By itself. It isn't assigned anywhere.

I'm going crazy trying to find why this is happening. Everything else works on the initial URL load. If I put a search, or column to sort by in the initial URL visit, it will process it correctly. However, the pagination appears to have a mind of it's own. Am I missing something? Is there a reason it would set itself back to 1??

HTML:

<pagination items-per-page="25" total-items="117" ng-model="currentPage"></...>

Angular:

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('filter', {
            url: '/column/:column/desc/:sort/search/:search/page/:page/',
            parent: 'parentState',
            controller: 'Ctrl'
        });
    }
]);
app.controller('Ctrl', function($scope, $state, $stateParams) {
    $scope.currentPage = 1;
    $scope.totalItems = 0;
    $scope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
        $scope.sorting.predicate = toParams.column;
        $scope.sorting.reverse = boolVal(toParams.sort);
        $scope.currentPage = Number(toParams.page);
        $scope.searchBuffer = JSON.parse(toParams.search);
    });
    $scope.$watch('currentPage', function() {
        $scope.currentRow = ($scope.currentPage - 1) * $scope.itemsPerPage;
        $scope.updateURL();
    }, true);
    $scope.updateURL = function() {
        $state.transitionTo('filter', {
            column: $scope.sorting.predicate,
            desc: $scope.sorting.reverse,
            search: angular.toJson($scope.searchBuffer),
            page: Number($scope.currentPage)
        });
    }
});

I console.log all over my code (not posted), and what happens is the following:

If I go to the URL www.mydomain.com#/column/'columnname'/desc/false/search/{}/page/17/ , considering that there are at least 17 pages in my pagination:

I console.log that the value of currentPage is 1 inside the currentPage $watch (makes sense, it is being initialized with the value I set). Afterwards, it gets logged as 17. Awesome, then $viewContentLoaded logs all of the correct $stateParams . Then after currentPage gets logged as 1 again..? Why???

On a different, but probably related note, after the initial load, everything works as expected, except when I change the page on pagination, $stateChangeSuccess runs twice. What's going on??

EDIT:

I think I found an error:

When I remove the pagination from my HTML entirely, the resetting to 1 stops occurring. This brings me to the conclusion that the pagination maybe wasn't ready/ hadn't loaded all of the data when I tried to change the page, so it went back to 1. Does anyone know how to circumvent this behavior?

Even if I put a really long delay (10 seconds) on transitioning the state, it still resets to 1.

Answer 1

the sequence of events works exactly as you say, except the last one:

1. first set to 1

    $scope.currentPage = 1; 

2. set it to 17

     $scope.$on('$stateChangeSuccess', $scope.currentPage = Number(toParams.page); 

3. then reload the page

    $scope.$watch('currentPage', function() { $scope.updateURL(); $state.transitionTo( 

4. so init controller again as per step 1

    $scope.currentPage = 1; 

though im not 100% sure about step 4, should set it to 1 or should set it to 17...

but the sequence is matching with your flow...