title: How to change the logout button to login in angular
body: <p>I have login and logout buttons that change dynamically after login.</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right" ng-controller="loginController"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href data-ng-show="token" ng-click="logout()"&gt;&lt;b&gt;Logout&lt;/b&gt;&lt;/a&gt;
          &lt;a href data-ng-hide="token" data-toggle="dropdown"&gt;&lt;b&gt;Login&lt;/b&gt;&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So after I login, the button changes to logout using <code>ng-hide</code> but the same button doesn't change back to login after I log out?</p>
  
  <p>Do I have to do a scope watch on the variables? I have the code like this using ui-router and states:</p>
  
  <pre><code>myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
  
      // For any unmatched url, redirect to /login
      $urlRouterProvider.otherwise("/Login");
  
      var header = {
          templateUrl: 'views/Header.html',
          controller: function ($scope) {
          }
  
      };
      var footer = {
          templateUrl: 'views/Footer.html',
          controller: function ($scope) {
          }
      };
      // Now set up the states
  $stateProvider
      .state('Login', {
          url: "/Login",
          views: {
              header: header,
              content: {
                  templateUrl: 'views/Login.html',
                  controller: function ($scope) {
                  }
              },
              footer: footer
          }
      })
      .state('LoggedIn', {
          url: "/LoggedIn",
          views: {
              'header': header,
              'content': {
                  templateUrl: 'views/LoggedIn.html',
                  controller: function ($scope) {
                  }
              },
              'footer': footer
          },
          data: {
              requiresLogin: true
          }
      });
  </code></pre>
  
  <p>Login controller where I am storing token in localstorage(as store in my case) to update the login/logout buttons using ng-show</p>
  
  <pre><code>myApp.controller('loginController', ['$rootScope', '$scope', 'Auth', '$state', 'jwtHelper', 'store',
      function ($rootScope, $scope, Auth, $state, jwtHelper, store) {
  
          function successAuth(res) {
              var decodedToken  = jwtHelper.decodeToken(res.token);
              store.set('jwt', res.token);
              store.set('email', decodedToken.email);
  
              if (store.get('jwt')) {
                  $state.go("LoggedIn");
              } else {
                  alert("Invalid username or password");
              }
          }
  
          $scope.signup = function () {
              var formData = {
                  email: $scope.email,
                  password: $scope.password
              };
  
              Auth.signup(formData, successAuth, function () {
                  $rootScope.error = 'Failed to signup';
              });
          };
  
          $scope.logout = function ()
          {
              Auth.logout(function () {
                  $state.go("Login");
                  console.log("token after logout is :" + store.get('jwt'));
              });
          };
          $scope.token = store.get('jwt');
      }]);
  </code></pre>
  
  <p>Update:</p>
  
  <p>Lets say after logging-in, Its routing from "Home" to "AboutUs" page with button shown as "Logout" and then if I logout it routes back to "Home" where the button is shown as "Login" </p>
  
  <p>but the problem is after logging-in if I manually route to "Home" and then I click on "Logout" button, the button stays as "Logout" even when token is set to null;</p>