I have an Angular service that looks like:

var lunchrServices = angular.module('lunchrServices', []);



lunchrServices.service('authService', function () {

    var user = null;



    this.login = function (userEmail) {

        user = userEmail;

    };

    this.logout = function () {

        user = null;

    };

    this.currentUser = function(){

        return user;

    }



});

I use this service on a controller on the main page of my application like so:

var lunchrControllers = angular.module('lunchrControllers', []);



lunchrControllers.controller('MainPageController', ['$scope', '$http', '$state', 'authService',

    function ($scope, $http, $state, authService) {    

        $scope.logIn = function () {    

            $http.post('/api/users/authenticate', {email: $scope.email, password: $scope.password}).

                success(function (data, status, headers, config) {



                    // lines of interest

                    authService.login($scope.email);

                    $state.go('users');

                }).

                error(function (data, status, headers, config) {

                    $scope.errorMessages = data;

                    $scope.password = ;

                })

        }

    }]);

With the users state displaying the following (I'm using ui-router to plug this in a ui-view):

div(class='container')

    h1 Welcome {{user}}



    // other stuff

The controller for this page looks like:

lunchrControllers.controller('UserController', ['$scope', '$http', '$state', 'authService',

    function ($scope, $http, $state, authService) {

        $scope.user = authService.currentUser();



        //other stuff

    }]);

When the user taken to this page through the $state.go('users') call, {{user}} is correctly populated.

The problem, however, is that refreshing the page now results in {{user}} being empty. How can I have the data stored in the service persist through page refreshes?