title: Angular.js delaying controller initialization
body: <p>I would like to delay the initialization of a controller until the necessary data has arrived from the server.</p>
  
  <p>I found this solution for Angular 1.0.1: <a href="https://stackoverflow.com/questions/11972026">Delaying AngularJS route change until model loaded to prevent flicker</a>, but couldn't get it working with Angular 1.1.0</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="/editor-tpl.html"&gt;
  Editor Template {{datasets}}
  &lt;/script&gt;
      &lt;div ng-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function MyCtrl($scope) {    
      $scope.datasets = "initial value";
  }
  
  MyCtrl.resolve = {
      datasets : function($q, $http, $location) {
          var deferred = $q.defer();
  
          //use setTimeout instead of $http.get to simulate waiting for reply from server
          setTimeout(function(){
              console.log("whatever");
              deferred.resolve("updated value");
          }, 2000);
  
          return deferred.promise;
      }
  };
  
  var myApp = angular.module('myApp', [], function($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: '/editor-tpl.html',
          controller: MyCtrl,
          resolve: MyCtrl.resolve
      });
  });​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dTJ9N/1/" rel="nofollow noreferrer">http://jsfiddle.net/dTJ9N/1/</a></p>