there is a bug that is ons-tab not work in my program - onsen-ui

Question

My code as follows， when I click tab button "Ratios", it does not work,but when I click "Notes", it works.Actually,when I change the sequence of ons-template， such as ons-template sequence is "price.html","notes.html","ratios.html",the result is when I click tab button "notes", it does not work,but when I click "Ratios", it works.
Anybody knows the reason?
<ons-page ng-controller="myPortfoliosController">
<ons-toolbar class="DCF">
<div class="left">
<ons-back-button style="color:white;"></ons-back-button>
</div>
<div class="center" style="font-size:22px;" >My Portfolios</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="price.html" active="true">Price</ons-tab>
<ons-tab page="ratios.html">Ratios</ons-tab>
<ons-tab page="notes.html" >Notes</ons-tab>
</ons-tabbar>
<ons-template id="price.html">
<ons-page ng-controller="portPrice">
<div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 10px;">
<div class="col-xs-6 col-sm-3" style="width:35%;">Stock Symbol</div>
<div class="col-xs-6 col-sm-3" style="width:20%;">Current</div>
<div class="col-xs-6 col-sm-3" style="width:25%;">Purchased</div>
<div class="col-xs-6 col-sm-3" style="width:20%;">Change</div>
</div>
<div ng-repeat="portfolio in portfoliosList">
<div class="portname_{{portfolio.backgroundColor}}">{{portfolio.portname}}</div>
<div ng-repeat="portfolioStock in portfolio['detail']">
<div class="row">
<div class="col-xs-6 col-sm-3" style="width:40%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.symbol}}</div>
<div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.price}}</div>
<div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;">{{portfolioStock.in_price}}</div>
<div class="col-xs-6 col-sm-3" style="width:20%;border-bottom:1px dashed #c0c0c0;color:{{portfolioStock.font_color}}">{{portfolioStock.gain_p}}</div>
</div>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="ratios.html">
<ons-page ng-controller="portRatios">
<div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 10px;">
<div class="col-xs-6 col-sm-3" style="width:35%;">Stock Symbol</div>
<div class="col-xs-6 col-sm-3" style="width:25%;">P/E(ttm)</div>
<div class="col-xs-6 col-sm-3" style="width:20%;">P/S</div>
<div class="col-xs-6 col-sm-3" style="width:20%;">P/B</div>
</div>
</ons-page>
</ons-template>
<ons-template id="notes.html">
<ons-page ng-controller="portNotes">
<div class="row" style="height:20px;background-color: #144A88;color:white;font-size: 14px;width: 100%;padding-left: 20%;">
<div class="col-xs-6 col-sm-2" style="width:45%;">Stock Symbol</div>
<div class="col-xs-6 col-sm-2" style="width:55%;">User Notes</div>
</div>
</ons-page>
</ons-template>
</ons-page>

Answer 1

The problem is that you are trying to wrap everything inside an ons-page element and that's wrong. You can never wrap ons-template inside ons-page, just the opposite is fine.
To fix your app, just remove the last </ons-page> tag and add it immediately after </ons-tabbar>, you will have a main page like this:
<ons-page ng-controller="myPortfoliosController">
<ons-toolbar class="DCF">
<div class="left">
<ons-back-button style="color:white;"></ons-back-button>
</div>
<div class="center" style="font-size:22px;" >My Portfolios</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="price.html" active="true">Price</ons-tab>
<ons-tab page="ratios.html">Ratios</ons-tab>
<ons-tab page="notes.html" >Notes</ons-tab>
</ons-tabbar>
</ons-page>