sticky state not properly displayed when views contain resolve functions

[sashless]

I am using

• angular 1.5.0
• ui router 0.3.0
• ui router extras 0.1.2

In my plunkr, checkout app.js line 29. When you use 100 ms for the $timeout inside the resolve function tab1 will be loaded properly and tab2 afterwards.

When you use instead 500 ms only tab2 will be loaded. Tab1 will be never displayed unless you hit the link tab1

The $timeout is just a placeholder for any promise. In my real world case that is a $http request were the response time differs.

http://plnkr.co/edit/lQ7acurykufGYnX28FrI?p=preview

[christopherthielen]

First, there are some problems with your setup: 1) in main.tab1 state you are using named views. The controller and controllerAs properties belong to the VIEW, not the state. 2) in main.tab1 state you put the resolve on the view. The resolve property belongs to the STATE not the view.

---

It looks like you want to activate both states when the app starts.

• After 200ms go to tab1
• After 500ms go to tab2

However, it takes 500ms to activate tab1 Then, the second transition (to tab2) starts, and SUPERSEDES the original transition (to tab1). A superseded transition is cancelled (this is normal UI-Router stuff).

You should activate tab1, wait for the transition to complete, and THEN activate tab2.

.run(function($timeout, $state, $rootScope) {
  $rootScope.$state = $state;
  function goto(state) { 
    return function() { return $state.go(state); } 
  }

  $timeout(goto('main.tab1'), 200)
    .then(goto('main.tab2'));

http://plnkr.co/edit/zAUa1hVHPwu4nkBg72Xm?p=preview