title: AngularJS load service then call controller and render
body: <p>My problem is that i need a service loaded before the controller get called and the template get rendered.
  <a href="http://jsfiddle.net/g75XQ/2/" rel="noreferrer">http://jsfiddle.net/g75XQ/2/</a></p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="root"&gt;
      &lt;h3&gt;Do not render this before user has loaded&lt;/h3&gt;            
      {{user}}
  &lt;/div&gt;
  ​
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>angular.module('app', []).
  factory('user',function($timeout,$q){
      var user = {};            
      $timeout(function(){//Simulate a request
          user.name = "Jossi";
      },1000);
      return user;
  }).
  controller('root',function($scope,user){
  
      alert("Do not alert before user has loaded");
      $scope.user = user;
  
  });
  ​
  </code></pre>
  
  <p>​</p>