AngularJS Boostrap tabs does not show anything for active tab when it is shown in dialog

Question

I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.

 <div class="portlet-body">
    <div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
        <ul class="nav nav-tabs nav-tabs-lg">
            <li id="li_tab_1">
                <a data-toggle="tab" href="#" data-target="#tab_1">
                    MyTab1
                </a>
            </li>
            <li id="li_tab_2" class="active">
                <a data-toggle="tab" href="#" data-target="#tab_2">
                    MyTab2
                </a>
            </li>
           
          
        </ul>
        <div class="tab-content">
            <div id="tab_1" class="tab-pane fade meter-tabs-height">   
                <div ng-include="'mytab1.html'"></div>         
            </div>
            <div id="tab_2" class="tab-pane fade in meter-tabs-height" active>

                <div ng-include="'mytab2.html'"></div>    
               
            </div>
       </div>
    </div>
</div>

When I firstly come into the dialog, the dialog shows MyTab2 with no content at all. However, when I click MyTab1 and then reclick MyTab2 , the content appears.

How does this happen and how could I handle this problem?Thank you.

Answer 1

I have made a mistake in my code, just add class="active" could resolve it.

Replace

<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
    <div ng-include="'mytab2.html'"></div>                
</div>

with

<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
    <div ng-include="'mytab2.html'"></div>                
</div>