select2 не работает внутри загрузочной вкладки

Question

Я использую вкладку начальной загрузки, у меня есть две вкладки (tab1, tab2), обе вкладки содержат выпадающее меню select2. Первый работает отлично, но выпадающий список select2 в tab2 не работает. Вот мой код.

HTML

<div ng-controller="myctrl"> 
<ul class="nav nav-tabs nav-justified" role="tablist"> 
    <li class="active"><a data-toggle="tab" data-target="#tab1">Tab1</a></li> 
    <li><a data-toggle="tab" data-target="#tab2">Tab2</a></li>  
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
    <input type="hidden" id="test1"/> 
    </div> 
    <div id="tab2" class="tab-pane fade in active"> 
    <input type="hidden" id="test2"/> 
    </div> 
</div> 
</div> 

JS

myapp.controller('myctrl',function(){ 
    var test1 =$('#test1'); 
    $(test1).select2({ 
     data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}], 
    multiple: false, 
    }); 

var test2 =$('#test2'); 
$(test2).select2({ 
data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}], 
    multiple: false, 
}); 
}) 

пожалуйста, помогите мне.

Answer 1

Вы не должны комбинировать jquery и angularjs таким образом.

ЗАКАНЧИВАТЬ директивы Bootstrap интерфейса: http://angular-ui.github.io/bootstrap/#/tabs