select2가 부트 스트랩 탭 내부에서 작동하지 않습니다.

Question

부트 스트랩 탭을 사용하고 있으며 두 개의 탭 (tab1, tab2)이 있고 두 탭 모두 select2 드롭 다운 메뉴가 있습니다. 첫 번째 잘 작동하지만 tab2 select2 드롭 다운 작동하지 않습니다. 내 코드입니다.

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를 결합해서는 안됩니다.

체크 아웃 부트 스트랩 UI 지침 :