title: Best way to change html header on User Login AngularJS
body: <p>I'm working on an Angular Application in which the main page (where the angular module is initialize) has a header where I want to show different divs if the user is logged or not.</p>
  
  <p>Here is the header code fragment of the index.html:</p>
  
  <pre><code>&lt;header ng-controller="HeaderController"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-xs-12"&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 none"&gt;
                      &lt;a class="navbar-brand" href="#page-top"&gt;&lt;img src="Content/img/logo.png" class="img-responsive" alt="logo"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 col-lg-offset-6 col-md-offset-6 col-sm-offset-9" ng-if="showloginheader"&gt;
                      &lt;!--ng-if="showloginheader"--&gt;
                      &lt;span href="#" class="button-login" id="toggle-login" ng-click="OnLoginClick()"&gt;Ingresar&lt;/span&gt;&lt;img src="Content/img/logo.png" id="logo_min" alt="logo"&gt;
                      &lt;div id="login" ng-controller="LoginController"&gt;
                          &lt;form name="loginForm" ng-submit="login()" role="form"&gt;
                              &lt;input type="text" placeholder="Ingresá el usuario" required ng-model="username" /&gt;
                              &lt;input type="password" placeholder="Ingresá la contraseña" required ng-model="password" /&gt;
                              &lt;!--&lt;input type="submit" class="login" value="Ingresar" /&gt;--&gt;
                              &lt;input type="checkbox" id="checkbox" checked&gt;&lt;div class="reco-contra"&gt;Recordar contraseña&lt;/div&gt;
                              &lt;div class="olvi-contra"&gt;&lt;a&gt;Olvidaste la contraseña?&lt;/a&gt;&lt;/div&gt;
                              &lt;!--&lt;div class="form-actions"&gt;--&gt;
                              &lt;input type="submit" class="login" value="Ingresar" /&gt; &lt;!-- ng-disabled="form.$invalid || vm.dataLoading" --&gt;
                              &lt;input type="submit" id="clase-fb" value="Ingresar con Facebook" /&gt;
                              &lt;input type="submit" id="clase-tw" value="Ingresar con Twitter" /&gt;
                              &lt;input type="submit" id="clase-goo" value="Ingresar con Google" /&gt;
                              &lt;div class="olvi-contra"&gt;&lt;a&gt;Olvidaste la contraseña?&lt;/a&gt;&lt;/div&gt;
                          &lt;/form&gt;
                          &lt;a href="#/register"&gt;&lt;input type="submit" value="&amp;iexcl;Registrate ahora!" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-4 col-lg-offset-6 col-md-offset-6 col-sm-offset-9" ng-if="showcurrentuserheader"&gt;&lt;!--ng-if="showcurrentuserheader"--&gt;
                      &lt;span href="#" class="log-img" id="toggle-login"&gt;&lt;img src="img/fefe.png" alt="logo"&gt;Pablo&lt;/span&gt;
                      &lt;div id="login"&gt;
                          &lt;div id="login-ok"&gt;
                              &lt;div class="opcion-log"&gt;
                                  &lt;a href="recetas_obtenidas.html"&gt;&lt;strong&gt;RECETAS OBTENIDAS&lt;/a&gt;&lt;/strong&gt;
                              &lt;/div&gt;
                              &lt;div class="opcion-log"&gt;
                                  &lt;a href="perfil.html"&gt;&lt;i class="fa fa-cog fa-spin"&gt;&lt;/i&gt;  PERFIL&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="opcion-log"&gt;
                                  &lt;a href="#"&gt;CERRAR SESION&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>You can notice that there are two divs below the logo, what I want to achieve is to show the first div (the one that has a "ng-if=showloginheader") meanwhile the user isn't logged in and then show the other one when the user gets into the application (has a "ng-if=showcurrentuserheader").</p>
  
  <p>I would like to know which would be the best option to do this, until now I have tried to do it with the ng-if directive.</p>
  
  <p>First I initialize the variables throw a service (to make it accesible by several controllers):</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('iziCooker')
          .factory('UserService', UserService);
  
      UserService.$inject = ['$http'];
      function UserService($http) {
          var service = {};
          var showloginheader = true;
          var showcurrentuserheader = false;
  
          service.GetLoginHeaderState = GetLoginHeaderState;
          service.GetCurrentUserHeaderState = GetCurrentUserHeaderState;
          service.ChangeHeadersVisibility = ChangeHeadersVisibility;
  
          return service;
  
                  function GetLoginHeaderState() {
                  return showloginheader;
              }
  
              function GetCurrentUserHeaderState() {
                  return showcurrentuserheader;
              }
  
              function ChangeHeadersVisibility() {
                  showloginheader = false;
                  showcurrentuserheader = true;
              }
  
      }
  })();
  </code></pre>
  
  <p>Then I assign those values in the HeaderController:</p>
  
  <pre><code>    (function () {
      'use strict';
  
      angular
          .module('iziCooker')
          .controller('HeaderController', HeaderController);
  
      HeaderController.$inject = ['$scope', 'UserService'];
      function HeaderController($scope, UserService) {
          $scope.showloginheader = UserService.GetLoginHeaderState();
          $scope.showcurrentuserheader = UserService.GetCurrentUserHeaderState();
  
      }
  
  })();
  </code></pre>
  
  <p>Up to this point, this works properly because the HeaderController is injected when the application starts (it's in the "master page" of Angular, index.html).</p>
  
  <p>But then I tried to change the variables values in the login controller after you got a successful response from the DB to get into the application.</p>
  
  <pre><code>    (function () {
      'use strict';
  
      angular
          .module('iziCooker')
          .controller('LoginController', LoginController);
  
      LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService', '$scope', 'UserService'];
      function LoginController($location, AuthenticationService, FlashService, $scope, UserService) {
          $scope.dataLoading = false;
          $scope.username = "";
          $scope.password = "";
  
          console.log("Login Controller Loaded!");
  
          //vm.login = login;
  
          (function initController() {
              // reset login status
              AuthenticationService.ClearCredentials();
          })();
  
        $scope.login =  function login() {
            $scope.dataLoading = true;
            AuthenticationService.Login($scope.username, $scope.password, function (response) {
                  if (response.success) {
                      AuthenticationService.SetCredentials($scope.username, $scope.username);
                      UserService.ChangeHeadersVisibility();
                      $location.path('/map');
                  } else {
                      FlashService.Error(response.message);
                      $scope.dataLoading = false;
                  }
              });
        };
  
      }
  
  })();
  </code></pre>
  
  <p>When I am redirected to the "/map" view, it still shows the first div. It seems that those ng-if variables aren't updated or something like that. Perhaps I'm missing something.</p>
  
  <p>I'm almost sure that this isn't the way to do this, so I would to know if I must change something or change completely the code.</p>
  
  <p>Thank you.</p>
  
  <p>Edit:</p>
  
  <p>Authentication Service</p>
  
  <pre><code>    (function () {
      'use strict';
  
      angular
          .module('iziCooker')
          .factory('AuthenticationService', AuthenticationService);
  
      AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService'];
      function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService) {
          var service = {};
  
          service.Login = Login;
          service.SetCredentials = SetCredentials;
          service.ClearCredentials = ClearCredentials;
  
          return service;
  
          function Login(username, password, callback) {
  
              /* Dummy authentication for testing, uses $timeout to simulate api call
               ----------------------------------------------*/
              //$timeout(function () {
              //    var response;
              //    UserService.GetByUsername(username)
              //        .then(function (user) {
              //            if (user !== null &amp;&amp; user.password === password) {
              //                response = { success: true };
              //            } else {
              //                response = { success: false, message: 'Username or password is incorrect' };
              //            }
              //            callback(response);
              //        });
              //}, 1000);
  
              /* Use this for real authentication
               ----------------------------------------------*/
              $http.post('ws/api/Usuario/Login', { username: username, password: password })
                  .success(function (response) {
                      callback(response);
                  });
  
          }
  
          function SetCredentials(username, password) {
              var authdata = Base64.encode(username + ':' + password);
  
              $rootScope.globals = {
                  currentUser: {
                      username: username,
                      authdata: authdata
                  }
              };
  
              $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line
              $cookieStore.put('globals', $rootScope.globals);
          }
  
          function ClearCredentials() {
              $rootScope.globals = {};
              $cookieStore.remove('globals');
              $http.defaults.headers.common.Authorization = 'Basic';
          }
      }
  
      // Base64 encoding service used by AuthenticationService
      var Base64 = {
  
          keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
  
          encode: function (input) {
              var output = "";
              var chr1, chr2, chr3 = "";
              var enc1, enc2, enc3, enc4 = "";
              var i = 0;
  
              do {
                  chr1 = input.charCodeAt(i++);
                  chr2 = input.charCodeAt(i++);
                  chr3 = input.charCodeAt(i++);
  
                  enc1 = chr1 &gt;&gt; 2;
                  enc2 = ((chr1 &amp; 3) &lt;&lt; 4) | (chr2 &gt;&gt; 4);
                  enc3 = ((chr2 &amp; 15) &lt;&lt; 2) | (chr3 &gt;&gt; 6);
                  enc4 = chr3 &amp; 63;
  
                  if (isNaN(chr2)) {
                      enc3 = enc4 = 64;
                  } else if (isNaN(chr3)) {
                      enc4 = 64;
                  }
  
                  output = output +
                      this.keyStr.charAt(enc1) +
                      this.keyStr.charAt(enc2) +
                      this.keyStr.charAt(enc3) +
                      this.keyStr.charAt(enc4);
                  chr1 = chr2 = chr3 = "";
                  enc1 = enc2 = enc3 = enc4 = "";
              } while (i &lt; input.length);
  
              return output;
          },
  
          decode: function (input) {
              var output = "";
              var chr1, chr2, chr3 = "";
              var enc1, enc2, enc3, enc4 = "";
              var i = 0;
  
              // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
              var base64test = /[^A-Za-z0-9\+\/\=]/g;
              if (base64test.exec(input)) {
                  window.alert("There were invalid base64 characters in the input text.\n" +
                      "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                      "Expect errors in decoding.");
              }
              input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  
              do {
                  enc1 = this.keyStr.indexOf(input.charAt(i++));
                  enc2 = this.keyStr.indexOf(input.charAt(i++));
                  enc3 = this.keyStr.indexOf(input.charAt(i++));
                  enc4 = this.keyStr.indexOf(input.charAt(i++));
  
                  chr1 = (enc1 &lt;&lt; 2) | (enc2 &gt;&gt; 4);
                  chr2 = ((enc2 &amp; 15) &lt;&lt; 4) | (enc3 &gt;&gt; 2);
                  chr3 = ((enc3 &amp; 3) &lt;&lt; 6) | enc4;
  
                  output = output + String.fromCharCode(chr1);
  
                  if (enc3 != 64) {
                      output = output + String.fromCharCode(chr2);
                  }
                  if (enc4 != 64) {
                      output = output + String.fromCharCode(chr3);
                  }
  
                  chr1 = chr2 = chr3 = "";
                  enc1 = enc2 = enc3 = enc4 = "";
  
              } while (i &lt; input.length);
  
              return output;
          }
      };
  
  })();
  </code></pre>