AngularJS Tutorial - Bind data model select with ng-options and ng-model

The following code shows how to bind data model select with ng-options and ng-model.

Example


<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head><!-- ww  w  .java 2s . c  om-->
<body>
  <body ng-app ng-controller="AppCtrl">
     <div>Operator is: {{filterCondition.operator}}</div>
     <select ng-model="filterCondition.operator" 
             ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
<script type='text/javascript'>
function AppCtrl($scope) {
    $scope.filterCondition={
        operator: 'eq'
    }
    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}
</script>
</body>
</html>

The code above is rendered as follows: