Tab Title Not Displayed in Header When Tabs are Encapsulated In a View

ionic-v1
1

I’m trying to get the title of the tab to be the title displayed in the header when the tab is within a view? I can see just a plain set of tabs doing this in this CodePen, but it doesn’t in the example CodePen I made for this issue where the tabs are encapsulated within a view.

How do you get the tabs view-title in the header?

NOTE: If I set the outermost view-title I get a title, but then its the same title for all three tabs.

<ion-view>
    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-tabs class="tabs-assertive tabs-icon-only">

        <ion-tab icon-on="ion-ios-filing"
                 icon-off="ion-ios-filing-outline">

            <ion-nav-view>
                <ion-view view-title="Event Overview">
                    <ion-content class="padding">
                        TEST 1
                    </ion-content>
                </ion-view>
            </ion-nav-view>

        </ion-tab>

        <ion-tab icon-on="ion-ios-clock"
                 icon-off="ion-ios-clock-outline">

            <ion-nav-view>
                <ion-view view-title="Event Overview">
                    <ion-content class="padding">
                        TEST 1
                    </ion-content>
                </ion-view>

            </ion-nav-view>

        </ion-tab>

        <ion-tab icon-on="ion-ios-gear"
                 icon-off="ion-ios-gear-outline">

            <ion-nav-view>
                <ion-view view-title="Event Overview">
                    <ion-content class="padding">
                        TEST 1
                    </ion-content>
                </ion-view>

            </ion-nav-view>

        </ion-tab>

    </ion-tabs>
</ion-view>