angularjs - Transfer Loggedin status to another controller in Angular -

i've been trying implement easy feature in angular, without no success.

i have 2 controllers , 1 service. service provides shared methods retrieve if user logged in or not;

app.factory("shared",["$rootscope",function($rootscope){     var data = {};     data.val = false;     data.get = function() {         return data.val;     },     data.set = function(val) {         data.val = val;     };     return data;  }]); 

then have controller attached login/logout bar login , logout links should changed of ng-show , ng-hide. here html code this:

<ul class="reg" ng-controller="maincntr">         <li ng-hide="shared.get()"><a href="/register"> signup </a></li>         <li ng-hide="shared.get()"><a href="/login">login</a></li>         <li ng-show="shared.get()"><a href="/logout">logout</a></li>     </ul> 

and maincntr attached this:

 app.controller("maincntr,["$scope","shared","$rootscope",function($scope,shared, $rootscope){        $scope.$watch("shared.get()",function(newval){           console.log(newval);       },true);     }]); 

and lastly, have login controller login form rendered when on /login page. should notice above html login/signup links on index.html page. so, logincntr below:

app.controller("logincntr",["$scope","$http", "$window","$rootscope", "$location","shared",function($scope,$http, $window, $rootscope,$location,shared){       $scope.login = "";       $scope.password = "";       $scope.response = "";       $scope.loggedin = false;       $scope.submit = function(isvalid) {           if (isvalid) {       $http({           method: "post",           url: "/authenticate",           data: $.param({login:$scope.login,password:$scope.password}),           headers: {"content-type": "application/x-www-form-urlencoded"}       }).success(function(data,status,headers,config){           $window.sessionstorage.token = data.token;           console.log($window.sessionstorage.token);           $scope.response = "you logged in successfully";           shared.set(true); /////// here set shared valued true when user logged       }).error(function(data,status,error,config){           delete $window.sessionstorage.token;           $scope.response = data.response;       });   };       }; }]); 

so, that's it, doesn't work. being new angular, hard time me figure out wrong. may it's because "shared" value set in asynchronyous callback , never read, because login section has been loaded?

why not try $emit event listener. :

///****maincntr  app.controller("maincntr,["$scope","shared","$rootscope",function($scope,shared, $rootscope){        $scope.$on("loginevent", function($event, args){         alert(args.msg);      });//listen $emit event     }]);  ///****logincntr app.controller("logincntr",["$scope","$http", "$window","$rootscope", "$location","shared",function($scope,$http, $window, $rootscope,$location,shared){       $scope.login = "";       $scope.password = "";       $scope.response = "";       $scope.loggedin = false;       $scope.submit = function(isvalid) {           if (isvalid) {       $http({           method: "post",           url: "/authenticate",           data: $.param({login:$scope.login,password:$scope.password}),           headers: {"content-type": "application/x-www-form-urlencoded"}       }).success(function(data,status,headers,config){           $window.sessionstorage.token = data.token;           console.log($window.sessionstorage.token);           $scope.response = "you logged in successfully";           $scope.$emit("loginevent", {msg : "login successful..."}) /////// emit event       }).error(function(data,status,error,config){           delete $window.sessionstorage.token;           $scope.response = data.response;       });   };       }; }]);