title: Force AngularJS service to return data before loading controller
body: <p>I have a service in Angular which uses my API to get user information and provides it to my controllers. It's set up like this:</p>
  
  <pre><code>angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
    .service('userInfo', function($http, $cookies){
      $http.get('/api/users/' + $cookies.id).
      success(function(data) {
        var userInfo = data.user[0];
  
        return userInfo;
      });
    }). // other stuff comes after this
  </code></pre>
  
  <p>In my controllers, I include it like:</p>
  
  <pre><code>function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
      $scope.user = userInfo;
      console.log('user info is')
      console.log(userInfo);
  </code></pre>
  
  <p>This is returning no data, while if I put the same service function in the controller itself it returns just fine. What am I missing here? Never used DI/Services in Angular before so might be a simple mistake somewhere.</p>
  
  <p>I need to ensure that the service returns data <strong><em>before</em></strong> the controller loads. How can this be accomplished</p>