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

'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();

'use strict';
  .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

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"

Leave a Reply

Your email address will not be published. Required fields are marked *