AngularJS ngModel directive in select
Based on Tony the Pony's fiddle :
<div ng-app ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)"> </select> <p>{{opt}}</p></div>
With a controller:
function MyCtrl($scope) { $scope.fonts = [ {title: "Arial" , text: 'Url for Arial' }, {title: "Helvetica" , text: 'Url for Helvetica' } ]; $scope.change= function(option){ alert(option.title); }}
First create data (can be local or from server) in Controller. And initialize the default value, which force the default item selected in HTML form.
// supported languages$scope.languages = ['ENGLISH', 'SPANISH', 'RUSSIAN', 'HINDI', 'NEPALI'];// init default language$scope.language = 'ENGLISH';
Now in your HTML form
<select class="form-control" ng-model="language"> <option ng-repeat="language in languages">{{language}}</option></select>
The screenshot is here (note bootstrap CSS is used and not included here).
You can do a test in controller, whether the change is working
$scope.$watch('language', function (newVal, oldVal) { console.log(oldVal + " -> " + newVal);});
ENGLISH -> RUSSIAN
RUSSIAN -> SPANISH
SPANISH -> RUSSIAN
Hope this is helpful. Thanks!