javascript - Angular can not auto update -

i wrote angular project navigation bar, want nav bar can auto update when users had logged in, use ng-show , ng-hide control it, truth is no use, can do? , have wrote wrong code? don't know comprehend question because chinese , english poor.

<nav class="navbar navbar-default" role="navigation" ng-controller="userctrl">         <div class="navbar-header">             <button type="button" class="navbar-toggle" data-toggle="collapse"                 data-target="#example-navbar-collapse">                 <span class="sr-only">切换导航</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <a class="navbar-brand" ui-sref="index">许愿墙{{username}}</a>         </div>         <div class="collapse navbar-collapse" id="example-navbar-collapse">             <ul class="nav navbar-nav">                 <li class="active"><a ui-sref="index">首页</a></li>                 <li ng-hide="islogined"><a ui-sref="user.login">登录</a></li>                 <li ng-show="islogined"><a ui-sref="user.info">个人中心</a></li>                 <li ng-show="islogined"><a ui-sref="user.wish">我的愿望</a></li>                 <li ng-show="sex == 'female'"><a ui-sref="user.putwish">许愿</a></li>                 <li ng-show="islogined"><a ng-click='dologout()'>注销</a></li>             </ul>         </div> </nav>  <div class="container-fluid" ui-view>  </div> 

it's controller's code:

app.controller('userctrl', ['$scope', '$state', 'logoutservice', function($scope, $state, logoutservice) { if(sessionstorage.getitem('username')) {     $scope.islogined = true;     $scope.username = sessionstorage.getitem('username');     if(sessionstorage.getitem('sex') == 'male') {         $scope.sex = 'male';     } else {         $scope.sex = 'female';     } } else {     $scope.islogined = false; }  $scope.dologout = function() {     logoutservice.dologout();     sessionstorage.removeitem('username');     sessionstorage.removeitem('sex');     $state.go('index'); }; }]); app.controller('loginctrl', ['$scope', '$state', 'loginservice', function($scope, $state, loginservice) { $scope.dologin = function() {     var data = {         username: $scope.username,         password: $scope.password     };     loginservice.dologin(data)         .success(function(data, status){             if(status === 200) {                 sessionstorage.setitem('username', data.user.username);                 sessionstorage.setitem('sex', data.user.sex);                 $state.go('index');             }         }); }; }]); 

check thread out: how $watch state change of $stateprovider in angularjs?

create route change event handler , on route change, call function in userctrl controller check current login state.

thus, organize code follows:

app.controller('userctrl', ['$scope', '$state', '$rootscope', 'logoutservice',     function($scope, $state, $rootscope, logoutservice) {         var updateloginstate = function() {             if (sessionstorage.getitem('username')) {                 $scope.islogined = true;                 $scope.username = sessionstorage.getitem('username');                 if (sessionstorage.getitem('sex') == 'male') {                     $scope.sex = 'male';                 } else {                     $scope.sex = 'female';                 }             } else {                 $scope.islogined = false;             }         };         $scope.dologout = function() {             logoutservice.dologout();             sessionstorage.removeitem('username');             sessionstorage.removeitem('sex');             $state.go('index');         };         //initially, check login state when controller initializes         updateloginstate();         //listen route change , check login state again when route changes         $rootscope.$on('$statechangestart', function() {             updateloginstate();         })     } ]);