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

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>