angularjs - Scope variable is not updated on ng-click in views with Angular UI Router -

i have problem following code: plunkr.

when click button, ng-click changes variable var1 in scope. apparently variable not updated in view, have created ui router. looks scope have been copied inside same controller.

the problem disappears in 2 situations: when use {{$parent.var1}} instead of {{var1}}from inside view, or when remove controller: 'mainctrl' declaration state.

can clarify what's going on , how avoid such problems? solution removing controller declaration how angular ui router figure out controller use?

controllers , directives add elements dom create own scope (ng-if, ng-switch, ng-repeat, ng-view etc.). can use angularjs batarang chrome extension debug them. values inherited, setting value in child scope breaks inheritance. can create own service, or can use object inherited parent scope , long you're setting properties on inherited object you'd fine. since you're setting value in controller use || set value if inherited value isn't there. (plnkr):

app.controller('mainctrl', function($scope, globals) {   $scope.var1 = 1;   $scope.obj = $scope.obj || {var1: 1};   $scope.g = globals; // access in page   $scope.onclick = function() {     globals.var1++;     $scope.var1++;     $scope.obj.var1++;   }; });  app.service('globals', function() {   this.var1 = 1;   return this; });