title: Using Bootstrap-select with AngularJS
body: <p>I am trying to implement <a href="http://silviomoreto.github.io/bootstrap-select/" rel="noreferrer">http://silviomoreto.github.io/bootstrap-select/</a> to my AngularJS application. </p>
  
  <p>Most of the people who try and do the same, they have any issue that the selectpicker is set before Angular gets the data. But for me that is not the case. When Select Picker is fired, my select has all the data but for some reason the dropdown toggle event is not firing.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select id="partyRole" name="partyRole" class="form-control" ng-model="partyRole" ng-options="role as role.text for role in partyRoles"&gt;
      &lt;option value=""&gt;Please Select...&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The JS calls adds selectpicker to all my selects.</p>
  
  <p><strong>JS:</strong> </p>
  
  <pre><code>$(window).bind("load", function () {
      return $('select').selectpicker();
  });
  </code></pre>
  
  <p>I am also using this directive to bind the selectpicker data:</p>
  
  <p><a href="https://github.com/joaoneto/angular-bootstrap-select/blob/master/build/angular-bootstrap-select.js" rel="noreferrer">https://github.com/joaoneto/angular-bootstrap-select/blob/master/build/angular-bootstrap-select.js</a></p>
  
  <p><strong>Final UI</strong></p>
  
  <p><img src="https://imgur.com/bJ3uBvJ.png" alt="Final UI"></p>
  
  <p>As you can see the div gets created from the selectpicker and I also get all the data.. But clicking on the button does nothing. </p>
  
  <p>I have Angular UI, Angular JS in the application with Bootstrap stylesheets. </p>
  
  <p>EDIT:</p>
  
  <p>Nevermind, the version of the angular directive I downloaded from github was probably in a broken state, because after I applied it from today's updated code.. it worked.</p>