ng-if with recursive directives does not work as expected

Question

I have two recursive directives inside of ui-bootstrap tabs. For performance reasons I only want to actually load the directive when it's respective tab is active. So I use ng-if to on the directive like so:

<dave ng-if="activeTab === 0"></dave>
...
<bob ng-if="activeTab= === 1"></bob>

Now if you go to Tab 0 you see "dave". Then go to Tab 1 you see "bob". Go back to Tab 0 you still see "bob". If I remove the ng-if all works as expected: dave, bob, dave.

I need to be able to only render the directives when the tab is active. I have tried putting the directives inside a div and using ng-if on that like so:

<div ng-if="activeTab === 0"><dave></dave></div>

But still have the same problem.

Codepen of problem

Answer 1

I was able to get the tabs to properly go back and forth by doing the following:

<div class="container" ng-app="app">
  <uib-tabset active=activeTab>
    <uib-tab index=0>
      <uib-tab-heading>Tab One</uib-tab-heading>
      <dave ng-if="active === index" recurse="true"></dave>
    </uib-tab>
    <uib-tab index=1>
      <uib-tab-heading>Tab Two</uib-tab-heading>
      <bob ng-if="active === index" recurse="true"></bob>
    </uib-tab>
  </uib-tabset>
</div>