angularUI ui-select2 directive not working


I’ve been banging my head against the wall with this, so I’ve reduced it to the bare minimum:


<html lang="en" ng-app="myApp">
<body ng-controller="main">

<select ui-select2>

<!-- Scripts loaded here. See the plunker -->



.module('myApp', ['ui'])
.controller('main', function (){});

Here’s the link to the Plunker:

I think I’m doing it all right, but it just refuses to initialize the select2.

Here’s the error I get:

Object [[object HTMLSelectElement]] has no method ‘is’

Here’s a screenshot of the error:

enter image description here

What am I doing wrong here?

Problem courtesy of: MegaHit


You need to load jQuery before AngularJS and apparently select2.js before Angular-ui

The following order works fine

<script src="jquery.min.js"></script>          
<script src="select2.js"></script>
<script src="angular.js"></script>
<script src="angular-ui.js"></script>

Check the plunker: