title: Angular: using promise in service to store data once, cache
body: <p>I'm trying to use a service to store the data from my API, and only make a call to the API once across different pages. Right now I have a solution working with the controller accessing the service's promise and setting the scope variable in the callback, but I was wondering if there was a way to make this cleaner. I saw in another thread that $http.get returns a promise so there should be a way to make use of that, but when I tried using the answer from yohairosen in the following question, but it didn't set my variable properly:<a href="https://stackoverflow.com/questions/14332943/use-promise-and-service-together-in-angular">Use Promise and service together in Angular</a></p>
  
  <p>Here's my code</p>
  
  <p><strong>/app/scripts/services/team.js</strong></p>
  
  <pre><code>app.factory('Team', function($http, $q) {
    var deferred = $q.defer();
  
    $http.get('/api/teams').success(function(teams){
      deferred.resolve(teams);
    });
  
    return {
      promise: deferred.promise,
    }
  });
  </code></pre>
  
  <p><strong>/app/scripts/controllers/teams.js</strong></p>
  
  <pre><code>app.controller('TeamsCtrl', function ($scope, $routeParams, Team) {
    Team.promise.then(function(data){
      $scope.teams = data;
    });
  });
  </code></pre>