AngularJS : How to trigger an action on select option? - angularjs

Question

I am new in Angular. I try to print a form. In the form i have a select input. I dont know how to do an action when the user select an option. I want to retrieve datas from server when the select option is made. I just need an example please.

Answer 1

Although this is an old question I would like to add Sunils comment as an actual answer as it is much simpler than doing a custom directive. If you want to trigger some function when the user selects another option, just use ng-change on the select tag.
In Controller-as Syntax it would look like this.
Note that it is important to have ng-model in there even if you wouldn't need it somewhere else as ng-change is watching out for "yourModel" if I understood the documentation correctly.
<div ng-controller="yourController as controllerName">
[...]
<select ng-model="yourModel" ng-change="controllerName.yourFunction(yourArguments)">
Your options here (or use ng-options on the select tag)
</select>
[...]
</div>
In the controller you then define what is supposed to happen:
this.yourFunction = function(yourArguments){
//do your things here, e.g. http request
}

Answer 2

You Can write a directive like this :
yourApp.directive('changed',function(){
return function(scope,elem,att){
elem.bind('change',function(){
alert('hi');
})
}
});
And then you can use it in your view like this :
Your SELCET TAG here :
<select changed>
<option value="1">1</option>
<option value="2">2</option>
</select>
Also if you want to pass anything from the select to your directive you can do this :
<select changed="passthis">
<option value="1">1</option>
<option value="2">2</option>
</select>
And then in your directive you can get what ever you've sent:
yourApp.directive('changed',function(){
return function(scope,elem,att){
elem.bind('change',function(){
// below will alert: "passthis"
alert(att.changed);
// bellow will alert what ever option user has choosed
alert(elem.value());
})
}
});
You want to run a $http request on selection changed ? easy :
yourApp.directive('changed',function($http){//notice here I injected $http
return function(scope,elem,att){
elem.bind('change',function(){
$http.post('YourUrl',{yourDataTosend})
.success(function(msg){
alert("msg from your backend: ",msg)
}).error(function(){
alert('Error');
})
})
}
});