The problem:

So far (by 4/2015) UI Bootstrap provides an extremely simply tab component (ui.bootstrap.tabs). You need to include the content of tab within the "tab" tags.

Or do it yourself with ui-view. In order to get a tab work with your templates and controllers for your tab content area, you need to wire a lot (routing and insert controllers).

There is another approach using directive (click to see detail) but you still need to do a lot of coding "outside" the tab tags.

The problem is that we don't want to do any javascript wiring and don't want to embed content of tabs within the tabs in the main html either. We only want to assign the reference of template and controller for each tab inside main HTML.

The solution: