title: AngularJS Load controllers only when parent controller finishes async call
body: <p>I am building a website with AngularJS and Google Cloudendpoint</p>
  
  <p>The architecture is as follow. I have :</p>
  
  <p>1 - a MainCtrl that manages the overall site display (top menus, modals, etc...)</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl" ng-cloak main-directive&gt;
      ...
      &lt;div ng-view&gt;&lt;/div&gt;
      ...
  &lt;/body&gt;
  </code></pre>
  
  <p>2 - ng-view with a controller for each page that all have a their own controllers managed by the $routeprovider</p>
  
  <p>main.js</p>
  
  <pre><code>.config([
      '$routeProvider',
      '$locationProvider', 
      '$httpProvider',
      function($routeProvider, $locationProvider, $httpProvider) {
  
                      ...
          $routeProvider.when('/example', {
              templateUrl : 'partials/example.html', 
              controller  : 'ExampleCtrl',
              access      : accessLevels.PUBLIC
                      }
                      ...
          $routeProvider.otherwise({redirectTo: '/'});
      }
  </code></pre>
  
  <p>The MainCtrl needs to do an async call to a Google Cloud Endpoint in order to get the session looking like this.</p>
  
  <pre><code>gapi.client.myapi.app.init().execute(function(resp){});
  </code></pre>
  
  <p>So far what I have done is wrap that code in a Service function called by the MainCtrl then do a watch in every children controller on an initDone value that gets updated in the MainCtrl when the async call is done.</p>
  
  <p>MainCtrl</p>
  
  <pre><code>SessionService.init().then(function(data){
      $scope.initDone = SessionService.getInitDone();
  });
  </code></pre>
  
  <p>Service</p>
  
  <pre><code>angular.module('myapp.services').service('SessionService', function ($http, $q, $rootScope) {
  
  this.initDone = false
  this.session = {}
  
  this.init = function(){
      var s = this; 
      var deferred = $q.defer();
      gapi.client.myapi.app.init().execute(function(resp){
          deferred.resolve(resp);
          s.initDone = true;
      });
      return deferred.promise;
  }
  
  this.getInitDone = function(){
      return this.initDone;
  }
  </code></pre>
  
  <p>});</p>
  
  <p>ExampleCtrl</p>
  
  <pre><code>angular.module('myapp.controllers').controller('ExampleCtrl', function MainCtrl($scope, $timeout, $log, $location, SessionService) {
  
  $scope.$watch('initDone', function(newVal, oldVal){
      $scope.testValue = SessionService.getInitDone()
  })
  </code></pre>
  
  <p>});</p>
  
  <p>While this work I am not sure it is the right solution. What I would like would be to be able to keep the ng-view waiting until the MainCtrl has done his job.</p>
  
  <p>Because doing the way I do it means that ng-view gets displayed then once the call to the endpoint gets updated which does not look too good from a user prospective.</p>
  
  <p>I tried to play with the resolve in the $routeProvider and do the API call from there but then my MainCtrl does not get the session values properly.</p>
  
  <p>What would be my solution would be to do a :</p>
  
  <pre><code>   $routeProvider.when('/example', {
  templateUrl : 'partials/example.html', 
  controller  : 'ExampleCtrl',
  access      : accessLevels.PUBLIC,
      resolve     : MainCtrl.init
  }
  </code></pre>
  
  <p>But MainCtrl is not available in the $routeProvider</p>
  
  <p>Another idea would be to intercept the ng-view call but I am not sure where to do this and have access to Service at the same time.</p>
  
  <p>Thanks for any idea/help</p>
  
  <p>EDIT</p>
  
  <p>I tried to do something like this in my main.js</p>
  
  <pre><code>        $routeProvider.when('/example', {
              templateUrl : 'partials/example.html', 
              controller  : 'ExampleCtrl',
              access      : accessLevels.PUBLIC,
  
              resolve: {
                  sessionData: ["$q", "SessionService", function($q, SessionService) {
                      //console.log(SessionService.getTest())
  
                      var deferred = $q.defer();
                      gapi.client.myapi.app.init().execute(function(resp){
                          deferred.resolve(resp);
                      });
                      return deferred.promise;
                  }]
  
          });
  </code></pre>
  
  <p>Which works if I want each children controller to call to the api. What I would like though is have the children controllers to use whatever the MainCtrl has initialized once it is ready. Basically only load the views and associated controller when MainCtrl is ready (async call included</p>