javascript - Why variable in $scope does not update? -

javascript - Why variable in $scope does not update? -

code in plunker. have 2 controllers. in first controller have handler button in view

$scope.click = function () { $location.url("/some"); console.log("clicked"); }

in handler alter url. configured $routeprovider.

var app = angular.module('plunker', []).config( function ($routeprovider) { $routeprovider.when('/some', {template: " counter {{n}}</br> <button ng-click='click()'>click load new url still \"loading cntl\"</button>", controller: "loading"}) .when("/second",{controller: "loading"}); });

here have 2 different routes have same controller - loading controller after url changed /some new button appears in view. have handler button in loading controller.

app.controller("loading", function ($scope,$location) { $scope.n= $scope.n || 0; console.log("at begining n "+ $scope.n); $scope.click = function click() { $scope.n++; console.log("n after++ " + $scope.n); $location.url("/second");

}

}); here increment n variable , alter url /second. in $routeprovider indicated route url must have loading controller well. after triggering of button disappears because /second router have no template. press button on main view again, loading controller executed 1 time more, n variable still 0. why value of n not 1? know explanation confusing, have code in plunker

you're instantiating new controller has new scope (and new variable n). need maintain iteration info in more persistant, parent scope, service, localstorage, etc (depends need info for).

here's working illustration using $rootscope, can see (you should utilize other $rootscope in final code): http://plnkr.co/edit/hetrobpwa6vyjx83eev0?p=preview

i added simple console.log('scope', $scope); in controller, can see each time alter url, new scope created.

javascript angularjs angularjs-scope