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 to control the state/route change, and have the ui-view below the . 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

Hat tip to chris-t for correct config.

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

index.html

  
    
      Left
    
  
  
    
      Right
    
  


  

  

    

      
    
  
  

    

      
    
  

app.js (ui-router config)

$stateProvider
.state('left', {
  url: "/",
  views: {
    "viewA": {
      template: "Left Tab, index.viewA"
    },
    "viewB": {
      template: 'Left Tab, index.viewB
Show List' +
                '
'
    },
    "viewC": {
      template: 'Left Tab, index.viewC 
'
    }
  }
})
.state('left.list', {
  url: 'list',
  views: {
    "viewB.list": {
      template: '
Nest list viewB
' +
                '
{{thing}}
',
      controller: 'Tab1ViewBCtrl',
      data: {}
    },
    "viewC.list": {
      template: 'Left Tab, list.viewC'
    }
  }
})