Angular ui-bootstrap tabs not rendering ui-view

Question

I am upgrading an existing angular app to all the latest versions of angular (v1.2.13), ui-router (v0.2.8), and ui-bootstrap (v0.10.0).

I have nested views that hav

Answer 1

Yeah, you can render ui-views within tabs. The trick is to use ui-sref in <tab-heading> to control the state/route change, and have the ui-view below the </tabset>. I'm sure there are other ways, but thats how I got tabs working with ui-router.

edit update

Above original suggestion is wrong, ui-sref should be in <tab>

Hat tip to chris-t for correct config.

Working multiple views demo http://plnkr.co/edit/gXnFS3?p=preview

index.html

<tabset>
  <tab ui-sref="left">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Left</a>
    </tab-heading>
  </tab>
  <tab ui-sref="right">
    <tab-heading style="cursor:pointer;">
      <a ui-sref-active="active">Right</a>
    </tab-heading>
  </tab>
</tabset>
<div class="row">
  <br>
  <div class="col-xs-4">
    <div class="well" ui-view="viewA">
      <!--Here is the A content-->
    </div>
  </div>
  <div class="col-xs-4">
    <div class="well" ui-view="viewB">
      <!--Here is the B content-->
    </div>
  </div>
</div>

app.js (ui-router config)

$stateProvider
.state('left', {
  url: "/",
  views: {
    "viewA": {
      template: "Left Tab, index.viewA"
    },
    "viewB": {
      template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' +
                '<div ui-view="viewB.list"></div>'
    },
    "viewC": {
      template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>'
    }
  }
})
.state('left.list', {
  url: 'list',
  views: {
    "viewB.list": {
      template: '<h2>Nest list viewB</h2><ul>' +
                '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>',
      controller: 'Tab1ViewBCtrl',
      data: {}
    },
    "viewC.list": {
      template: 'Left Tab, list.viewC'
    }
  }
})

Answer 2

Setting the tab-heading enables the links, but if you click in the tab but outside the link, the link will not activiate. Here is the response I got from ui-router. Thanks to Chris T.

ui-router

plunkr

    <tabset>
    <tab ui-sref="user.list">
        <tab-heading><a ui-sref-active="active">Users</a></tab-heading>
    </tab> 
    </tabset>

Update:

I was having issues deep liking with this, due to ui-sref-active. As of ui-router.2.10.2.11/angular-ui-router.js this was enhanced to support inheritance - see stack overflow post and ui-router issue 18