angularjs - How to resolve promises of child controller on route change? -

i have angular ionic app. assigned controller, template , resolve promises in routes. working fine main controller loads after promises of parent controller resolved. if route contains child controller promises. here problem page need load after promises of parent , child controller resolved.

punker

var app = angular.module('testapp', ['ionic']);  app.config(function($stateprovider, $urlrouterprovider) {   $stateprovider.state('dashboard', {       url: "/dashboard",       templateurl: "dashboard.html",       controller: 'dashboardcontroller',       title: 'dashboard',       resolve: {           userdetails: function(dataservice) {               return dataservice.getuserdetails(1);           },           dashboarddetails: function(dataservice) {               return dataservice.getdashboarddetails();           }       }   });    $urlrouterprovider.otherwise('/dashboard'); });  app.factory('dataservice', function($q) {    return {      getuserdetails: function(id){        var defer = $q.defer();        var userdetails = {          name: "saidh"        }        defer.resolve(userdetails);        return defer.promise;      },      getdashboarddetails: function(){        var defer = $q.defer();        var dashboarddetails = {          title: "dashboard"        }        defer.resolve(dashboarddetails);        return defer.promise;      }    } });  app.controller('headercontroller', function($scope, userdetails) {    console.log(userdetails);//error: [$injector:unpr] unknown provider:    $scope.userdetails = userdetails; }); app.controller('dashboardcontroller', function($scope, dashboarddetails) {    console.log(dashboarddetails);//working: show result    $scope.dashboarddetails = dashboarddetails; }); 

how can achieve this?

simple add nested states, , each state should have it's own resolve: somepromise attribute, here fork plunkr , add timeout parent , children view shown when promise 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 strategist-forward