How to call AngularJS function from select > option - html

Question

I need to call an AngularJS function from selection:
<select ng-model="selection" >
<option onselect="angular.element(this).scope().functionCall('one')">one</option>
<option onselect="angular.element(this).scope().functionCall('two')">two</option>
<option onselect="angular.element(this).scope().functionCall('three')">three</option>
<option onselect="angular.element(this).scope().functionCall('four')">four</option>
</select>
However, the function never gets called.
In the controller,
$scope.functionCall = function(value){
// do stuff with value
}
How can I call the function.

Answer 1

It's recommended that you use ng-change for that matter, the result may be the same as Cyril's, but the code is more readable and testable, also it is considered a better practice:
Here is a plunker demonstrating it in action:
http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
$scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
}
});
And the HTML:
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
</select>
Hope that helps. Thanks.

Answer 2

A Little bit to add on Cyril's and Fedaykin answers:
HTML code
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
Controller Code
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
console.log($scope.selectedItem);
}
});
You will notice that when the select option is changed, a function gets called which will give the you the value of the current selected value.

Answer 3

Here's what you could do :
HTML
<div ng-controller="YourController">
<select ng-model="selection" ng-options="choice for choice in choices"></select>
</div>
YourController :
$scope.choices = ["first choice", "second choice",...]
$scope.$watch('selection', function(newVal, oldVal){
switch(newVal){
case 'first choice':
[do Some Stuff]
break;
case 'second choice':
[do Some Stuff]
break;
default:
[well, do some stuff]
break;
}
}
BTW: I decided to put the options in the javascript, but what you did also works.
EDIT : ng-change VS $watch, see this question

Answer 4

First, onselect is not a angular keyword, It's a normal javascript keyword
You should use ng-change param in select or use like below..,
In HTML code you have to use like this.,
<select ng-model="selection" >
<option onselect="functionCall('one')">one</option>
<option onselect="functionCall('two')">two</option>
<option onselect="functionCall('three')">three</option>
<option onselect="functionCall('four')">four</option>
</select>
and in the controller
function functionCall(value){
//do stuff with value
}