如何解决bootstrap.js和angularjs的角度列表之间的冲突

Question

This is my html code

<div class="form-group">

     <select ng-model="modSelectedState" id="selectState" name="selectState"
          ng-options="state as state.full_name for state in states">
          <option value="">Select State...</option>                                         </select>
     </div><!-- /.form-group -->

It renders as expected until i add this line to my code:

 <script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>

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.

This is how I load the code in the controller

 $http.get('./data/states.js').success(function (data) {
        $scope.states = data.locations;
    });

states.js is stored locally.

I have some other angular elements on the page and they all work fine. I also tried to play with the loading order (ie 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.

Is there any known conflict between those two libraries when it comes to binding lists? Is there any known workaround?

Answer 1

You need to use controls specially prepared to work with bootstrap and angular ... otherwise you will not only get this type of unexpected issues, but you'll get other type of issues based on the fact that you are trying to make your own implementations when there already exist validated ways of working with javascript libraries. Best regards.