How to resolve promises of child controller on route change?

I have an Angular Ionic app. I assigned controller, template and its resolve promises in its routes. This is working fine so that my main controller only loads after all the promises of parent controller resolved. But if this route contains another child controller with some promises. Here the problem is the page only need to load after all the promises of parent and child controller resolved.

See plunker http://plnkr.co/edit/G5VJd289KprS92hs3uCT

How can I achieve this?

Simple add nested states, and each state should have it's own resolve: somePromise attribute, here i fork your plunkr and add a timeout so the parent and children view are only shown when the promise is solved

Example:

    $stateProvider.state('header', {
      url: "/home",
      templateUrl: "header.html",
      controller: 'HeaderController',
      resolve: {
          UserDetails: function(DataService) {
              return DataService.getUserDetails(1);
          }
      }
  });

  $stateProvider.state('header.dashboard', {
      url: "/dashboard",
      controller: 'DashboardController',
      templateUrl: "dashboard.html",
      parent: 'header',
      resolve: {
          DashboardDetails: function(DataService) {
              return DataService.getDashboardDetails();
          }
      }
  });

That way it's very strategist-forward

You could get the resolve promises inside DashboardController only, You will never get it inside home controller which is inside the html template. The resolve services are available inside the controller which are mentioned on route state itself. So as you can access the dependency inside DashboardController place it in scope variable & make it available to child scopes and view too.

Also you need to remove UserDetails dependency from HomeController to get rid of error, because UserDetails will never accessible there

Code

app.controller('DashboardController', function($scope, DashboardDetails, UserDetails) {
  console.log(UserDetails); //Working: show result
  $scope.dashboardDetails = DashboardDetails;
  $scope.userDetails = UserDetails;
});

See Working Plunkr Here