Transfer Loggedin status to another controller in Angular - angularjs

Question

I've been trying to implement this easy feature in Angular, but without no success.
I have two controllers and one service. The service provides a shared methods to retrieve if user is 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 I have a controller attached to login/logout bar where login and logout links should be changed with the help of ng-show and ng-hide. Here is a html code for this:
<ul class="reg" ng-controller="mainCntr">
<li ng-hide="shared.get()"> Signup </li>
<li ng-hide="shared.get()">Login</li>
<li ng-show="shared.get()">Logout</li>
</ul>
And mainCntr attached to this:
app.controller("mainCntr,["$scope","shared","$rootScope",function($scope,shared, $rootScope){
$scope.$watch("shared.get()",function(newval){
console.log(newval);
},true);
}]);
And lastly, I have login controller for login form rendered into when we are on /login page. I should notice that the above HTML for login/signup links is always on index.html page. So, loginCntr is 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 I set shared valued to true when the user is logged
}).error(function(data,status,error,config){
delete $window.sessionStorage.token;
$scope.response = data.response;
});
};
};
}]);
So, that's it, but it doesn't work. Being new to Angular, it is hard time for me to figure out what is wrong. May be it's because "shared" value is set in asynchronyous callback and thus never read, because the login section has been already loaded?

Answer 1

why you not try $emit event listener.
like :
///****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 an event
}).error(function(data,status,error,config){
delete $window.sessionStorage.token;
$scope.response = data.response;
});
};
};
}]);