Angular UI Select2 in the Bootstrap Navigation Bar

Question

Select2 of the Angular-UI in Bootstrap navigation bar is giving error

TypeError: Object [[object HTMLInputElement]] has no method 'is'

Please refer to the http://plnkr.co/edit/yCG5M9

Tobi

please explain your answer in more detail. – Charnel

@jm-'s answer is correct. I've added an explanation to his post. – Nylon

Answer 1

You need to load jQuery before AngularJS

Just change the order to

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

EDIT (blesh): This is because if angular doesn't see JQuery as it's loading, then the tElm (angular element) argument being passed into that compile function is a jqLite object. If Angular sees JQuery has been loaded first, the tElm will be a full JQuery object, and is() will be available.

Miocene

This is the correct answer, I just added an explanation of why it's the correct answer. – Nylon

But After changing the order of the script import Bootstrap navigation collapse does not work. The collapse button that comes for responsive design does not work. Please see the updated link plnkr.co/edit/yCG5M9 – Tobi