title: How to set information into index.html outside the ng-view
body: <p>I'm working with angular for the first time and having some trouble showing some dynamic information in my index.html file. Everything inside the ng-view tag is working great.</p>
  
  <p>When a user authenticates, a global variable with user information is put into the $rootScope and into a cookie. I've tried to access to $rootScope in the index by doing something like {{$rootScope.globals.currentUser.username}} but it doesn't work. So considering the code below, how can I show the logged user information in my index.html?</p>
  
  <p>I have tried creating a controller in my app.js and putting the ng-controller on the body. While this works, it doesn't refresh when the user logout (required a page refresh to update the app controller). The same happens after the user login (it requires a whole page refresh for the information to appear).</p>
  
  <p>Code to set cookie and the object in $rootScope.</p>
  
  <pre><code>function SetCredentials(username, password, token) {
    $rootScope.globals = {
      currentUser: {
        username: username,
        token: token
      }
    };
  
    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    $cookies.put('globals', JSON.stringify($rootScope.globals));
  }
  </code></pre>
  
  <p>I also have the following index.html file. As you can see, i have set the {{$rootScope.globals.currentUser.username}} but nothing shows after the user is logged in</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;base href="/" /&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;My App&lt;/title&gt;
      &lt;meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"&gt;
      &lt;!-- css references --&gt;
  
  &lt;/head&gt;
  
  &lt;body class="hold-transition skin-blue sidebar-mini"&gt;
      &lt;div class="wrapper"&gt;
          &lt;!-- Main Header --&gt;
          &lt;header class="main-header"&gt;
              &lt;!-- Header Navbar --&gt;
              &lt;nav class="navbar navbar-static-top" role="navigation"&gt;
                  &lt;!-- Sidebar toggle button--&gt;
                  &lt;a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;!-- Navbar Right Menu --&gt;
                  &lt;div class="navbar-custom-menu"&gt;
                      {{$rootScope.globals.currentUser.username}}
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;!-- Content Wrapper. Contains page content --&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;ng-view&gt;&lt;/ng-view&gt;
          &lt;/div&gt;
          &lt;!-- /.content-wrapper --&gt;
          &lt;!-- Main Footer --&gt;
          &lt;footer class="main-footer"&gt;
              &lt;!-- To the right --&gt;
              &lt;div class="pull-right hidden-xs"&gt;
                  something here
              &lt;/div&gt;
              &lt;!-- Default to the left --&gt;
              &lt;strong&gt;Copyright &amp;copy; 2016 &lt;a href="#"&gt;NPF&lt;/a&gt;.&lt;/strong&gt; All rights reserved.
          &lt;/footer&gt;
      &lt;/div&gt;
      &lt;!-- ./wrapper --&gt;
      &lt;!-- REQUIRED JS SCRIPTS --&gt;
      &lt;!-- jQuery 2.2.0 --&gt;
      &lt;script src="Scripts/jquery-2.2.3.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/app.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="Scripts/linq.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular/angular-cookies.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- application scripts --&gt;
      &lt;!-- Main app --&gt;
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
  
      &lt;!-- controllers --&gt;
      &lt;script src="app/home/home.controller.js"&gt;&lt;/script&gt;
  
      &lt;!-- services --&gt;
      &lt;script src="app/services/authentication.service.js"&gt;&lt;/script&gt;
      &lt;script src="app/services/user.service.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My app file, is as follows</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular
      .module('myApp', ['ngRoute', 'ngCookies', 'treeControl'])
      .constant("appSettings",
      {
          serverPath: "http://localhost:64789/",
          webApiPath: "http://localhost:64789/api/"
      })
      .config(config)
      .run(run);
  
  config.$inject = ['$routeProvider', '$locationProvider'];
  function config($routeProvider, $locationProvider) {
  
      $locationProvider.html5Mode({
          enabled: true,
      });
  
      $routeProvider
          .when('/', {
              controller: 'HomeController',
              templateUrl: 'app/home/home.html',
              controllerAs: 'viewModel'
          })
  
          .when('/login', {
              controller: 'LoginController',
              templateUrl: 'app/login/login.html',
              controllerAs: 'viewModel'
          })
  
          .when('/register', {
              controller: 'RegisterController',
              templateUrl: 'app/register/register.html',
              controllerAs: 'viewModel'
          })
  
          .otherwise({ redirectTo: '/login' });
  };
  
  
  run.$inject = ['$rootScope', '$location', '$cookies', '$http'];
  function run($rootScope, $location, $cookies, $http) {
      // keep user logged in after page refresh
      try {
          $rootScope.globals = JSON.parse($cookies.get('globals'));
      }
      catch (err) {
          $rootScope.globals = {};
      }
  
      if ($rootScope.globals &amp;&amp; $rootScope.globals.currentUser) {
          $http.defaults.headers.common['Authorization'] = 'Bearer ' + $rootScope.globals.currentUser.token;
      }
  
      //config.headers.Authorization = 'Bearer ' + authData.token;
  
      $rootScope.$on('$locationChangeStart', function (event, next, current) {
          // redirect to login page if not logged in and trying to access a restricted page
          var restrictedPage = $.inArray($location.path(), ['/login', '/register', '/gds']) === -1;
          try {
              var loggedIn = $rootScope.globals.currentUser;
          }
          catch (err) {
  
          }
          if (restrictedPage &amp;&amp; !loggedIn) {
              $location.path('/login');
          }
      });
  }})();
  </code></pre>