HTML Select. Select2 + ng-click = Not working? - html

Question

I am using AngularJS, and Select2 to create a nice dropdown menu.
I've included an ng-click in the Option tag (of the Select tag). However, the ng-click does not seem to be working when in a Select2.
<select ui-select2 >
<option ng-repeat="car in myGarage" ng-click="ride(car)">
{{car.Name}}
</option>
</select>
It also doesn't seem to work when using a normal Select tag.
How can I get them to work?
JSFiddle:

Answer 1

use ng-change and ng-model instead of ng-click
<select ui-select2 ng-change="ride(car)" ng-model="car">
<option ng-repeat="car in myGarage" value ={{car.Name}}>
{{car.Name}}
</option>
</select>

Answer 2

That is the incorrect way to use a select.
First off, there is ng-options attribute to a select that needs to be used instead of ng-repeat on the options.
Secondly, instead of using ng-click, you can assign a ng-model to the select that updates with the selected car as follows:
In your controller, you need only the following model and you can remove other models
$scope.myGarage = [
{
Name: "Toyota 86"
},
{
Name: "Hyundai Genesis Coupe"
},
{
Name: "Nissan GTR"
},
{
Name: "Veyron"
}
];
In your view, use ng-options and ng-model as follows:
<select ng-model="selectedCarUI" ng-options="car.Name as car.Name
for car in myGarage" ui-select2>
</select>
Using UI-Select2 - Car: {{selectedCarUI}}
<select ng-model="selectedCarNormal" ng-options="car.Name as car.Name
for car in myGarage">
</select>
Using Normal Select - Car: {{selectedCarNormal}}
This should now work. Here is a fiddle for the same

Answer 3

The OP is using angular-ui select2. The following is from the angular-iu/ui-select2 website:
"ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead."
See the "Working with dynamic options" section at https://github.com/angular-ui/ui-select2
So ng-change is probably the best option.

Answer 4

I don't know if is a lit bit late but i just discover how to make it work:
1) I'm using the original Select2
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
2) the html goes as follows:
<select class="form-control js-example-basic-single"
ng-options="item.label for item in yourVector"
ng-change="yourFunction(item)" ng-model="item">
</select>
3) the script at the end of the template:
<script type="text/javascript">
$(".js-example-basic-single").select2();
</script>
it works for me :)