title: How to make data in Angular service persist through page refresh
body: <p>I have an Angular service that looks like:</p>
  
  <pre><code>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;
      }
  
  });
  </code></pre>
  
  <p>I use this service on a controller on the main page of my application like so:</p>
  
  <pre><code>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 = "";
                  })
          }
      }]);
  </code></pre>
  
  <p>With the <code>users</code> state displaying the following (I'm using <code>ui-router</code> to plug this in a <code>ui-view</code>):</p>
  
  <pre><code>div(class='container')
      h1 Welcome {{user}}
  
      // other stuff
  </code></pre>
  
  <p>The controller for this page looks like:</p>
  
  <pre><code>lunchrControllers.controller('UserController', ['$scope', '$http', '$state', 'authService',
      function ($scope, $http, $state, authService) {
          $scope.user = authService.currentUser();
  
          //other stuff
      }]);
  </code></pre>
  
  <p>When the user taken to this page through the <code>$state.go('users')</code> call, <code>{{user}}</code> is correctly populated.</p>
  
  <p>The problem, however, is that refreshing the page now results in <code>{{user}}</code> being empty. How can I have the data stored in the service persist through page refreshes?</p>