Angular ui tab with seperate controllers for each tab

Question

I would like to make a bootstrap tabset with each tab having it's own controller. Can anyone point me in which direction I should go.

Currently I have made several difference controllers, which I would like to be used in a tabset instead of having them displayed as a different route.

I know I could fake it by having the tabset in the difference controller templates displaying the given controllers tab as active, but I would like to be able to have a main TabController with several child controllers (for each tab)

Answer 1

If you are using angular ui router you can use nested states to do this.

• Create an abstract state with a view that contains the tabs and a nested ui-view
• Create a child state for each of your tabs, each inheriting from the abstract state

• Each child state can set the content of the nested ui-view, and define a controller

   $stateProvider.state( 'tabs', {
      abstract: true,
          url: 'tabs',
          views: {
            "tabs": {
              controller: 'TabsCtrl',
              templateUrl: 'tabs.html'
            }
          }
        })
        .state('tabs.tab1', {
            url: '',  //make this the default tab
            views: {
            "tabContent": {
              controller: 'Tab1Ctrl',
              templateUrl: 'tab1.html'
            }
          }
        })
        .state('tabs.tab2', {
            url: '/tab2',
            views: {
            "tabContent": {
              controller: 'Tab2Ctrl',
              templateUrl: 'tab2.html'
            }
          }
        });
  

Answer 2

Why don't you put a directive on each tab that has it's own controller? If you are using 1.x. Separate your code out by directive not tabs