javascript - Why won't re-usable service refresh view in AngularJS -

an html view in angularjs contains form sends data through view's ccontroller , reusable service. re-usable service receives form's value, , charged updating values of 2 cookies values should printed in view. in devbox, firefox debugger shows form's data enters serice's handler method. view not beiing updated values of cookies changed service's form handler. specifically, view elements should shown or hidden based on values of cookies changed form's handler. what specific changes need made code below cookie values changed form handler able change content shown in view?

all of code required recreate probblem in the plnkr can examine clicking on link, , can recreate problem following gui /someroute (from drop down navigation menu) , entering value in form.

the re-usable service someclass.js, , content here:

angular .module('someclass', ['ngcookies']) .service('someclass', ['$rootscope', '$http', '$cookies', function($rootscope, $http, $cookies){     var $this = this;     this.prop1 = $cookies['test1'];     this.prop2 = $cookies['test2'];     this.resultphone = {};      this.method1 = function(isvalid, resultphone) {         if(isvalid){             var funcjson = $this.resultphone;             funcjson.wleadid = '1';             $cookies.test1 = 'yes';             if(funcjson.phonenum1=='ok'){               $cookies.test2 = 'ok';             } else {               $cookies.test2 = 'notok';             }         }     };      }]); 

the html view someroute.html, , content is:

someclass.prop1 is: {{someclass.prop1}} <br> someclass.prop2 is: {{someclass.prop2}} <br> <div ng-show="someclass.prop1!='yes'">     <h1>someclass prop1!</h1>     <div ng-include="'someroute_start.html'"></div> </div> <div ng-show="someclass.prop1=='yes'">     inside prop1 yes.  <br>     <div ng-show="someclass.prop2=='ok'">         <h1>include start.  ok. </h1>         <div ng-include="'someroute_first.html'"></div>     </div>      <div ng-show="someclass.prop2!='ok'">         <h2>include second.  not ok. </h2>         <div ng-include="'someroute_second.html'"></div>     </div>  </div> 

the web form in someroute_start.html referred above is:

    <form name="confirmform" ng-submit="someclass.method1(confirmform.$valid)" novalidate>         enter value:          <input type="text" name="phonenum1" ng-model="someclass.resultphone.phonenum1" required />         <button type="submit" ng-disabled="confirmform.$invalid" >submit</button>     </form> 

the controller someroute.html someroute.js, , code is:

angular .module('someroute', ['someclass']) .controller('someroute', function($scope, someclass) {      $scope.someclass = someclass;  }); 

all of remaining code required reproduce problem in the plnkr can examine clicking on link. what specific changes need made code in plnkr someroute.html view refreshed/changed based on someclass.js service's handling of view's form data?

note can clear cookies , restart test clicking logout button in gui.

using $interval check cookie value should work you.

however, there other problems in code well:

1. nagivation controller not used, hence, logout doesn't work 2. $cookie api of version 1.3+ used while using angular 1.2 

this plunker here has them fixed.