title: How to use Angular ui.bootstrap tabs with ui.router?
body: <p>Here's my initial implementation of ui.bootstrap tabs using ui.router:</p>
  
  <pre><code>&lt;tabset&gt;
    &lt;tab heading="Tab1" select="$state.go('home.tab1')"&gt;
      &lt;div ui-view="forTab1"&gt;&lt;/div&gt;
    &lt;/tab&gt;
    &lt;tab heading="Tab2" select="$state.go('home.tab2')"&gt;
      &lt;div ui-view="forTab2"&gt;&lt;/div&gt;
    &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p>Nicely simple, and it mostly works, but it has several problems.</p>
  
  <p>First, it doesn't work if I enter a URL into the browser, e.g. ".../home/tab1". The issue I presume is that while ui.router may be routing to the correct view, it doesn't know to select that view's tab.</p>
  
  <p>Second, if I try to leave the page for a state on a different page, it triggers an apparent bug in the tabs logic. As the tab set is being destroyed, it destroys the tabs one by one. When it destroys the currently selected tab, it appears to run the same logic that it would run if only that tab were being destroyed, not the entire tab set. This causes it to select one of the other not-yet-destroyed tabs, which makes ui.router go to that tab's state, which prevents me from leaving the page. (The fix presumably should be that destroying the tab set should not select any tabs during the destruction process.)</p>
  
  <p>Third, some of the tab views may be complex, with many server hits during their construction. I don't want to destroy and recreate them every time I switch from one tab to another. I'd much rather have a tab view be created when that tab is first selected and then persist until I leave the page. Selecting a previously viewed tab should just make it visible again, not re-create it.</p>
  
  <p>So, it looks like I need something more complex and sophisticated, but what? Thanks in advance for any suggestions.</p>
  
  <p>Update: the ui.router FAQ turns out to have a question on how to implement tabs. It points to an "extras" package that looks promising. Hopefully there's a way to integrate with ui.bootstrap tabs. <a href="http://christopherthielen.github.io/ui-router-extras/#/sticky" rel="noreferrer">http://christopherthielen.github.io/ui-router-extras/#/sticky</a></p>
  
  <p>Update: here are two implementations that work much better but still aren't quite right. The first one uses ui.bootstrap tabs:</p>
  
  <pre><code>&lt;tabset&gt;
    &lt;tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"&gt;&lt;/tab&gt;
    &lt;tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"&gt;&lt;/tab&gt;
  &lt;/tabset&gt;
  &lt;div ui-view="home.products" ng-show="$state.includes('home.products')"&gt;&lt;/div&gt;
  &lt;div ui-view="home.users" ng-show="$state.includes('home.users')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The second is based on top.html from Chris Thielen's sticky-tabs example:</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-static-top" role="navigation"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li ng-class="{active: $state.includes('home.products')}" &gt;&lt;a ui-sref="home.products"&gt;Products&lt;/a&gt;&lt;/li&gt;
      &lt;li ng-class="{active: $state.includes('home.users')}" &gt;&lt;a ui-sref="home.users"&gt;Users&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"&gt;&lt;/div&gt;
  &lt;div class="tabcontent well-lg" ui-view="home.users"    ng-show="$state.includes('home.users')"    class="col-sm-6"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Both of these avoid my first two problems above - going to a tab via URL works, and I can leave the page without triggering the tabs destroy bug (presumably because I'm not using "select="). </p>
  
  <p>However, there's still a problem, and it happens with both versions. The home.users template has a ui-grid, and if I first go to the page with that tab selected, the grid is empty. I can see the client requesting the grid's data from the server, but it doesn't show it. If I go to the other tab and come back, then it shows the data (after re-fetching it). Worse, this means I can't make the home.users state sticky, because then it gets stuck in the no-data-showing mode.</p>