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