angularjs - angular ui-route state parent and resolve (nested resolves)

Question

I have the following scenario:

1. index.html page loads angular and contains: ui-view
2. layout.html page contains left menu that resolves data from server
3. homepage.html use layout.html as his parent but needs to resolve his own data from server.

The problem is : when i resolve the parent the child is not resolving, when i remove the parent resolve, the child resolves.

can you help me, and let me know what am i doing wrong?

app.js

$stateProvider
    .state('layout', {
        url: "",
        templateUrl: 'partials/layout.html',
        controller:'LayoutController',
        abstract:true,
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_layout($q,CommonService)
            }
        }
    })
    .state('homepage', {
        url: "/homepage",
        templateUrl: 'partials/homepage.html',
        parent: 'layout',
        controller:'HomepageController',
        resolve : {
            result_data: function ($q,CommonService)
            {
                return resolve_homepage($q,CommonService)
            }
        }
    })

Answer 1

A resolve functionality should work for both - parent and child. There is a link to working plunker.

Both resolves will be triggered, and ui-router will wait until both of them are executed. In a child we can get the stuff resolved for parent, as well its own. So I would suggest to change the names (but it is not needed) and do it like this:

.state('layout', {
    url: "",
    templateUrl: 'partials/layout.html',
    controller:'LayoutController',
    abstract:true, 
    resolve : {
        result_data: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a parent");
             }, 500);
            return deferred.promise;
        } 
    }
})
.state('homepage', {
    url: "/homepage",
    templateUrl: 'partials/homepage.html',
    parent: 'layout',
    controller:'HomepageController',
    resolve : {
        result_data_child: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a child");
             }, 500);
            return deferred.promise;
        }
    } 

Now, we do have two params available: result_data and result_data_child. So these could be our controllers:

.controller('LayoutController', function ($scope, $state, result_data) {
    $scope.state = $state.current;
    $scope.result_data = result_data;
})
.controller('HomepageController', function ($scope, $state, result_data, result_data_child) {
    $scope.state = $state.current;
    $scope.result_data_parent = result_data;
    $scope.result_data_child  = result_data_child;
})

Summary. As we can see here, resolve feature is working for both. Also both (parent and child) must be resolved, when navigating to child, before this state is allowed.