javascript - ngHide directive only works with ngRoute module after page refresh -

when login on app, want login , signup button disappear nav using ng-hide directive if login successful , token received server, store in cookies.

nav part of index.html file.

because using angular routing, when login successful, index.html not loaded again instead render home page through ng-view directive.

the problem have refresh page ng-hide work. assuming because ng-hide part of index.html page, not reloaded.

hoping there bette solution refreshing page every time logs in.

here of relevant code.

html

<!-- navigation --> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">     <div class="container">         <div class="navbar-header">             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">                 <i class="fa fa-bars"></i>             </button>             <a class="navbar-brand page-scroll" href="#/">                 <i class="fa fa-play-circle"></i>  <span class="light">webnar</span>             </a>         </div>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse navbar-right navbar-main-collapse">             <ul class="nav navbar-nav">                 <!-- hidden li included remove active class link when scrolled past section -->                 <li class="hidden">                     <a href="#page-top"></a>                 </li>                 <li>                     <a class="page-scroll" href="#about">webinars</a>                 </li>                 <li ng-hide="token">                     <a class="page-scroll" href="#/login">login</a>                 </li>                 <li ng-show="token">                     <a class="page-scroll " href="#/create">add webinar</a>                 </li>                 <li ng-hide="token">                     <a class="page-scroll btn btn-default " href="#/signup">sign up</a>                 </li>                 <li ng-show="token" >                   <a class="page-scroll btn btn-default" ng-click="logout()">logout</a>                 </li>              </ul>         </div>         <!-- /.navbar-collapse -->     </div>     <!-- /.container --> </nav> 

app.js

var webinarapp = angular.module('webinarapp', ['ngcookies', 'ngroute']);  webinarapp.config(function($routeprovider){      $routeprovider      .when('/', {       templateurl: './home.html',       controller: 'maincontroller'     })     .when('/signup', {       templateurl: './signup.html',       controller: 'maincontroller'     })     .when('/login', {       templateurl: './login.html',       controller: 'maincontroller'     })     .when('/create', {       templateurl: './create.html',       controller: 'maincontroller'     }) });  webinarapp.controller('maincontroller', ['$scope', '$http', '$cookies', '$location', function($scope, $http, $cookies, $location){    $scope.welcomemessage = '';   $scope.users = [];   $scope.searchquery = "";   $scope.orderbyfield = 'name';   $scope.newuser = {};   $scope.loginuser = {};   $scope.webinars = [];   $scope.newwebinar = {};   $scope.isdisabled = false;     // ============== users ================    $scope.getusers = function(){     $http.get('/api/users').then(function(response){       $scope.users = response.data;     });   };   $scope.getusers();    $scope.createuser = function(){     $http.post('/api/users', $scope.newuser).then(function(response){       console.log(response.data)       $scope.users.push(response.data);       $scope.newuser = {};       $location.path('/login');     });   };    $scope.obtaintoken = function(){     $http.post("/api/users/authentication_token", $scope.loginuser).then(function(reponse){       $scope.token = reponse.data.token;       console.log($scope.token);       $cookies.put('token', $scope.token);       $location.path('/')     });   }; 

it's because put navbar on index page. it's not template loaded route module. it's not related route , controller bind it. controller declared in routes applies template loaded route module.

to bind controller whatever route use ng-controller directive. put on <nav> element

note if use "as controller" syntax must in controller : this.isdisabled instead of $scope.isdisabled

documentation : https://docs.angularjs.org/#!/api/ng/directive/ngcontroller

if need update datas controller rest of application. use $rootscope. if use 'ctrl as' syntax, easier : this.$rootscope=$rootscope;

if don't use $watch watch changes , rebind currentvalue controller :

$rootscope.watch('myparameter', function(new){      this.myparameter = new; }); 

and don't forget initialize variable in $rootscope. or variable end in child scope won't visible navbar's controller.