title: retain angular variables after page refresh
body: <p>I'm trying to figure out a way to keep my <code>angular</code> variables with page refresh / across controllers. My workflow is, </p>
  
  <ul>
  <li>user logs in via facebook and gets an access token</li>
  <li>users access token will be used with every request</li>
  </ul>
  
  <p>I tried two ways, </p>
  
  <p>1 - Assigning the token to a <code>rootScope</code>
      Not working</p>
  
  <p>2 - By using a <code>factory</code></p>
  
  <pre><code>#app.js
  'use strict';
  
  angular.module('recipeapp', [])
   .run(['$rootScope', '$injector', 'Authenticate', function($rootScope,$injector, Authenticate){
              $injector.get("$http").defaults.transformRequest = function(data, headersGetter) {
                  $injector.get('$http').defaults.headers.common['auth-token'] = Authenticate.getToken();
               }
          }]);
  
  #factory
  'use strict';
  angular.module('recipeapp')
    .factory('Authenticate', function(){
      var factory = {};
      var accessToken = "";
  
      factory.setToken = function(token) {
         accessToken = token;
      }
      factory.getToken = function() {
         return accessToken;
      }
  
      return factory;
  
    })
  
  #facebook controller
  I set the the token with every successful login
  Authenticate.setToken(data.app_token);
  </code></pre>
  
  <p>But the problem is, If I refresh the page, <code>Authenticate.getToken()</code> becomes blank. I'm pretty new to <code>angular</code> and cannot figure out a way to retain my data after a page refresh </p>
  
  <p>any help would be much appreciated </p>