select2 not working inside bootstrap tab

Question

I'm using bootstrap tab,I have two tabs(tab1,tab2), both tab contains a select2 dropdown. The first one works fine but the select2 dropdown in tab2 is not working.Here is my code.

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,
 });
})

please help me.

Can you create a plunker, it ll be easier to debug once that is in place. — Yasser Shaikh, Sep 28 '14 at 06:32

score 1 · Answer 1 · answered Sep 17 '14 at 10:02

1

you shouldn't combine jquery and angularjs in this way.

Check out Bootstrap UI directives: http://angular-ui.github.io/bootstrap/#/tabs

answered Sep 17 '14 at 10:02

stetro

547
2
6
11

the same problem is there in ui-bootstrap tabs also.I had tried it. – vipin Sep 17 '14 at 10:21
I'm seeing the same thing as @vipin. Select2 (native) isn't responding when wrapped in on angular-ui. – Fitz Agard Feb 25 '15 at 17:59

select2 not working inside bootstrap tab

1 Answers1