title: How to resolve a conflict between bootstrap.js and angularjs for angular lists
body: <p>This is my html code </p>
  
  <pre><code>&lt;div class="form-group"&gt;
  
       &lt;select ng-model="modSelectedState" id="selectState" name="selectState"
            ng-options="state as state.full_name for state in states"&gt;
            &lt;option value=""&gt;Select State...&lt;/option&gt;                                         &lt;/select&gt;
       &lt;/div&gt;&lt;!-- /.form-group --&gt;
  </code></pre>
  
  <p>It renders as expected until i add this line to my code:</p>
  
  <pre><code> &lt;script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>At which point all i see when i render the page is the default option ("select state"). When I remove bootstrap.js everything renders as expected - that is I see the list of all states.</p>
  
  <p>This is how I load the code in the controller </p>
  
  <pre><code> $http.get('./data/states.js').success(function (data) {
          $scope.states = data.locations;
      });
  </code></pre>
  
  <p>states.js is stored locally. </p>
  
  <p>I have some other angular elements on the page and they all work fine. I also tried to play with the loading order (i.e. load bootstrap before angular and vice versa) but the result is the same - the list renders fine without bootstrap and it doesn't render with bootstrap. </p>
  
  <p>Is there any known conflict between those two libraries when it comes to binding lists? Is there any known workaround?  </p>