AngularJS tabset does not show the correct state when the page is reloaded

Question

I'm using angular-ui-router in an AngularJS SPA along with the bootstrap tabset directive.

Here is my example http://plnkr.co/V0Cs6BfnggXshawMv4LX and the steps to reproduce the problem.

• Launch the plunker in "Full Screen" so the page can be easily reloaded.
• Click on the "Child Two" tab.
• The URL in the browser correctly shows the state as /home/child2
• Reload the page.
• URL in the browser still shows the state as /home/child2

The problem is the UI of the tabset now shows the "Child One" tab selected even though the state is "home.child2". Is there an automatic way to for the tabs to show the right state?

Answer 1

I did this without the tab array and the $stateChangeSuccess... There is one work-around still.

This will control clicking and the active status:

<tab ui-sref="home.child1" ui-sref-active="active"></tab>

For me, the ui-view does not work inside of the tab elements when the page is refreshd or loaded initially from the url. They only worked when the tabs were clicked. So, a work-around is to list the ui-views underneath the tabset.

<tabset><tab ui-sref="home.child1" ui-sref-active="active"></tab></tabset>
<div ui-view="home.child1"></div>

Now, only the correct ui-view will show on refresh and click nav works.

I'm not sure if this is specific to my app; but the first tab was always active. A disabled tab as the first tab was the work-around: <tab disabled="true"/>