title: How to make AngularJS refresh header after login
body: <p>I created web-application, in which there is a redirect after login to welcome page, but the header is not updated in this case.
  Here is my Angular code:</p>
  
  <pre><code>MyApp.controller('LoginController', function ($scope) {
      $scope.login = function () {
          login();
          var name = "";
          if (document.cookie.indexOf("name") !== -1)
              name = document.cookie.split('=')[2];
  
          $scope.menu = [
              {
                  title: 'Product',
                  url: 'product'
              },
              {
                  title: 'About',
                  url: 'about'
              },
              {
                  title: 'Contact',
                  url: 'contact'
              },
              {
                  title: name,
                  url: 'welcomeUser'
              },
              {
                  title: 'LogOut',
                  url: 'logout'
              }
          ];
  
          $scope.refresh();
      };
  });
  
  MyApp.controller('MainController', function ($scope) {
      var name = "";
      if (document.cookie.indexOf("name") !== -1)
          name = document.cookie.split('=')[2];
      if (document.cookie.indexOf("name") === -1 &amp;&amp; (name === "" || name === undefined)) {
          $scope.menu = [
              {
                  title: 'Product',
                  url: 'product'
              },
              {
                  title: 'About',
                  url: 'about'
              },
              {
                  title: 'Contact',
                  url: 'contact'
              },
              {
                  title: 'Register',
                  url: 'register'
              },
              {
                  title: 'Login',
                  url: 'login'
              }
          ];
      } else {
          $scope.menu = [
              {
                  title: 'Product',
                  url: 'product'
              },
              {
                  title: 'About',
                  url: 'about'
              },
              {
                  title: 'Contact',
                  url: 'contact'
              },
              {
                  title: name,
                  url: 'welcomeUser'
              },
              {
                  title: 'LogOut',
                  url: 'logout'
              }
          ];
      }
  });
  </code></pre>
  
  <p>Angular config code:</p>
  
  <pre><code>MyApp.config(function ($routeProvider, $locationProvider) {
      $routeProvider
          .when('/home', {
              templateUrl: 'partials/home.html',
              controller: 'MainController'
          })
          .when('/login', {
              templateUrl: 'partials/login.html',
              controller: 'LoginController'
          })
          .otherwise({
              redirectTo: '/404'
          });
  });
  </code></pre>
  
  <p>And here is my JS code for POST request sending - login user function:</p>
  
  <pre><code>function login() {
      var username = document.getElementById('usernameLogin').value;
      var password = document.getElementById('passwordLogin').value;
  
      if (!username.trim() || username.length === 0 || !password.trim() || password.length === 0) {
          document.getElementById('wrong_username').style.display = 'block';
          document.getElementById('wrong_password').style.display = 'block';
          return;
      }
  
      var json = {
          username: username,
          password: sha1(password)
      };
  
      $.ajax({
          type: "POST",
          url: "http://localhosts:7777/account_management/login_user",
          data: JSON.stringify(json),
          contentType: "application/json; charset=utf-8",
          success: function (data) {
              if (data === "true") {
                  document.cookie = "";
                  document.cookie = "username=" + username;
                  window.location.href = "/#/welcomeUser";
              } else if (data === "false") {
                  document.getElementById("wrong_password").style.display = "block";
              } else {
                  alert(data);
              };
          },
          failure: function (errMsg) {
              alert(errMsg);
          }
      });
  }
  </code></pre>
  
  <p>The <em>authorization</em> itself works fine, but <code>$scope.menu</code> updates only after page refresh. </p>
  
  <p><em>Is there any ideas how to fix it?</em></p>