How to swap tabs in Ionic based on a condition - angularjs

Question

I have an Ionic Framework app that has 4 tabs. But I only want three tabs visible at any one time.
The first two tabs are always visible (call them Tab1 and Tab2). But the third tab needs to be one OR the other, but not both, between two different pieces of content (call them Tab 3a and Tab 3b). So you will have Tab1,Tab2,Tab3a or Tab1,Tab2,Tab3b.
For HTML, I came up with this:
<ion-tab title="Tab 1" href="#/tab/1" >
<ion-nav-view name="tab-timeline"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 2" href="#/tab/2" >
<ion-nav-view name="tab-2"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3a" href="#/tab/3a" class="{{enableTab3a()}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" class="{{enableTab3b()}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
Now I need a directive that will toggle the classes on Tab3a and Tab3b with "ng-show" and "ng-hide" based on a condition.
The condition that determines which tab to show is stored in a localStorage variable and accessed in a controller like this:
if(window,localStorage["tab3"] == 'a' {
$scope.tab3a = true;
$scope.tab3b = false;
} else {
$scope.tab3a = false;
$scope.tab3b = true;
}
How do I build a directive that triggers the classes based on the condition, and shows only the correct tab (Tab3a or Tab3b)?
Additional Info:
I have 5 controllers. Each tab has a controller, and tabs.html has a controller. This is why I think a directive is best suited for this, if the directive can react to changes in the localStorage variable

Answer 1

Use the ion-tab attribute hidden
<ion-tab title="Tab 3a" href="#/tab/3a" hidden="{{tab3a}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" hidden="{{!tab3a}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
and in your controller
$scope.tab3a = window.localStorage["tab3"] == 'a';