How to replace page tabbar using Onsenui

Question

When I use myNavigator.pushPage() I am redirecting the user to a new page from an index.html page, however I only want the tabbar from the page the user is being redireted to show, currently it shows the redireted page tabbar underneath the main index.html tabbar:

Index.html

<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="main.html">
<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">
        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</ons-template>

Settings.html

<ons-page ng-controller="Settings">
    <ons-tabbar position="top">
        <ons-row>
            <ons-col width="15%">
               <div style="margin-top:5px"><ons-back-button> 
            </ons-back-button></div>
            </ons-col>
            <ons-col width="45%" align="left">
                <div style="padding-top:18px;color:#fff">Settings</div>
            </ons-col>
            <ons-col width="20%" align="left">

            </ons-col>            
        </ons-row>
    </ons-tabbar>

    <div class="login-form">
        <ons-row style="padding-top: 30px;padding-bottom:10px; text-align: center;">
            <ons-col>
                <div  align="center" style="padding:10px;font-size:0.8em">Update your settings below</div>
            </ons-col>
        </ons-row>         


        <ons-row style="margin-top: 20px; text-align: center;">
            <input type="email" class="text-input--underbar" placeholder="Email" ng-model="emailx" id="emailx">
            <input type="text" class="text-input--underbar" placeholder="First Name" ng-model="firstname" id="firstname">
            <input type="text" class="text-input--underbar" placeholder="Last Name" ng-model="lastname" id="lastname">
            <input type="password" class="text-input--underbar" placeholder="Password" value="" id="password">

            <p style="margin-top:15px">
            <ons-button modifier="large" class="login-button" ng-click="updateSettings();">Update</ons-button>
            </p>
        </ons-row>
    </div>

    <ons-row style="padding: 20px; text-align: center;border-bottom:1px solid #e3e3e3">
        <div  align="center"> </div> 
    </ons-row>   

    <ons-row style="padding: 20px; text-align: center;">
        <ons-col >
             <ons-button modifier="large" style="background:#ccc" ng-click="logout()">Logout</ons-button>
         </ons-col>
    </ons-row>    

</ons-page>

Notice how I have a tabbar in settings.html, right now this shows underneath the tabbar from index.html, but I want it to replace it or show just by itself when user is redirected to settings.html by pushPage()