How to use tabs with separate controllers?

Question

In my Angular 1.3 project I have the following:

<tabset>
  <tab ng-controller="FirstTabCtrl">
    {{content}}
  </tab>
  <tab ng-controller=SecondTabCtrl">
    {{content}}
  </tab>
</tabset>

In Angular 1.4.4 I get the following error message:

Multiple directives [ngController, tab] asking for new/isolated scope

I have tried wrapping the tabs in div's but that destroys the layout.

How can rewrite the code to work with 1.4.4?

Here is a plunker describing the problem: http://plnkr.co/edit/KScdI2jAZ4BAvDL4kCfk?p=preview

Answer 1

If you definitely don't want to use routes and states to handle the tabs, you could restructure the content inside each tab directive: add the ng-controller to a div inside the <tab> element, like this:

<tab heading="tab 1">
    <div ng-controller="FirstCtrl">
        {{content}}
    </div>
</tab>

Here's a plunkr to show it. This doesn't destroy the tab layout, but if it does in some way, you can always handle that with CSS.