ons-navigatorの中でons-tabbarを使う -Onsen UI- - 新米SE、マーケティングを学ぶの巻

OnsenUIのPage Patternsにタブバーの中でページナビゲーションを使うというものがありましたが、逆のパターンを行いたかったので試してみました。
最初のページのみタブバーが表示されており、そこから遷移するとタブバーが消え、ページナビゲーションでの管理になります。

言葉で説明してもなんじゃらほいなので、とりあえずデモページをみて下さい！
【OnsenUI】ナビゲーションの中でタブバーを使う：デモページ

簡単に、以下のようなことをやっています。

index.htmlにナビゲーションを配置、tab.htmlを読み込む。

tab.html内で、タブを含んだページが表示される。

タブで遷移してもtab.html内でのことなので、ナビゲーションは特に関係無し！

ナビゲーションを使ってページ遷移すると、tab.htmlからの遷移になるので、タブが表示されなくなる。

以下、各ページのソースです。

index.html(headは省略)

<body>
    <ons-navigator var="myNavigator" page="tab.html">
    </ons-navigator>
</body>

tab.html

<!-- タブバーの表示 -->
<ons-tabbar>
    <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab>
    <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab>
    <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab>
</ons-tabbar>

page1.html

<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page1</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page1</h1>
    <br>
    <div style="text-align:center;">
	<ons-button onClick="myNavigator.pushPage('page4.html')">Page4へ</ons-button>
	<br>
	 Page4へ遷移するとタブが消えます。
    </div>
</ons-page>

page2.html

<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page2</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page2</h1>
</ons-page>

page3.html

<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page3</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page3</h1>
</ons-page>

page4.html

<ons-page>
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center header_title">Page4</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page4</h1>
</ons-page>