title: Select2 Control Not Working inside html Table
body: <p>I placed two select2 controls in a page. One outside a table and the other inside it. With the code following, only the one outside the table works fine but the one inside does not at all. (Nothing happens when the control is clicked).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="drpBizPartner" class="form-control select2 select2-hidden-accessible" ng-model="vm.salesInvoice.cardCode" ng-options="x.id as x.cardName for x in vm.businessPartners" name="CardCode" style="width: 100%;"&gt;
     &lt;option value="0"&gt;Select Business Partner&lt;/option&gt;
  &lt;/select&gt;   //Outside the table
  
  &lt;select id="drpItem" class="form-control select2 select2-hidden-accessible" ng-model="lineItem.item" ng-options="item as item.itemCode for item in vm.items" name="ItemCode" style="width: 100%;"&gt;
     &lt;option value="0"&gt;Select Item&lt;/option&gt;
  &lt;/select&gt;    //Inside the html table
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>        $(function () {
              $('#drpBizPartner').select2();
              $('#drpItem').select2();
          });
  </code></pre>
  
  <p>After searching the internet, I discovered what I thought was a fix to get the <code>select2</code> control to work. The script is as follows;</p>
  
  <pre><code>        $table.on('post-body.bs.table', function () {
              $('#drpItem').select2();
          });
  </code></pre>
  
  <p>But the above code clears the items on both <code>select2</code> controls (outer and inner). Please how can I get them both to work perfectly? Thanks in adavance.</p>