retain angular variables after page refresh

I'm trying to figure out a way to keep my angular variables with page refresh / across controllers. My workflow is,

  • user logs in via facebook and gets an access token
  • users access token will be used with every request

I tried two ways,

1 - Assigning the token to a rootScope Not working

2 - By using a factory

#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);

But the problem is, If I refresh the page, Authenticate.getToken() becomes blank. I'm pretty new to angular and cannot figure out a way to retain my data after a page refresh

any help would be much appreciated

You can use localStorage. It is really easy to use.

var token = "xxx";
localStorage.setItem("token", token);
localStorage.getItem("token"); //returns "xxx"

When you refresh a page all your JavaScript context is lost (including all data saved in variables).

One way to maintaing information from one session to another is to use the browser's localStorage. In your case, you probably want to check ngStorage.