UI router nested view not resolving - angularjs

Question

I am using UI Router Multiple Views concept.
The documentation says that i can have resolve on individual views. As you can see in my plunker, I have a resolve on my child view. The resolve returns a promise, which in my case, is resolved in the parent controller. I have simulated my problem with a setTimeOut. Basically, after 5 seconds, the child view should load (with an alert saying "In Child State") but it doesn't !!!
Relevant code is below but please instead refer to Plunker.
'child#parent': {
template: '<h4>This is Child State</h4>',
controller: childCtrl,
resolve: {
trd: function(tradeFactory) {
console.log('in resolve of child');
return tradeFactory.ready();
}
}
}

Answer 1

(Check updated and working plunker) The point here is:
all resolve must be already resolved, before the views (with its controllers) are rendered
And that is not true in your scenario. In fact, there is a race condition, ending up in the deadlock.
one view is waiting for a resolve (is provided with a promise)
other view's controller is ready to trigger resolve (make a promise resolved), but... it cannot be triggered, while waiting for its sibling
The original snippet
views: {
'': {
...
// inside of this, you expect to resolve the below promise
controller: parentCtrl
},
'child#parent': {
...
resolve: {
trd: function(tradeFactory) {
// this is a promise waiting for resolve
// implemented in parent controller ... deadlock
return tradeFactory.ready();
}
}
}
So, the above is not working. We have to do all inside of the resolve, e.g. this way:
views: {
'': {
...
controller: parentCtrl,
// here do the resolve
resolve: {
parentReady: function(tradeFactory){
setTimeout(function(){
tradeFactory.ResolveReady()
}, 1500);
}
}
},
'child#parent': {
...
resolve: {
trd: function(tradeFactory) {
console.log('in resolve of child');
return tradeFactory.ready();
}
}
}
There is updated plunker