3 Answers3

2

Why don't you use ng-options?

<select ng-model="form.isAdmin" ng-options="o.value as o.name for o in options"></select>

options array in your controller:

$scope.options = [
    { 'name': 'Yes', 'value': true }, 
    { 'name': 'No', 'value': false }
];

Demo on JSFiddle


var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', [function() {
  var vm = this;
  vm.isAdmin = false;

  vm.adminOptions = [{
    val: true,
    name: 'Yes'
  }, {
    val: false,
    name: 'No'
  }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl as form">
    <select ng-model="form.isAdmin" ng-options="opt.val as opt.name for opt in form.adminOptions">
    </select>
    {{form.isAdmin}}
  </div>
</div>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • Well, I need to use different terms for true and false (Yes/No). How can I achieve this? –  Jan 17 '17 at 10:08
  • @sboesch Updated my answer and JSFiddle. – Mistalis Jan 17 '17 at 10:10
  • 1
    I didn't want to use an object because it seemed too exaggerated for such a simple task, but I have to admit it's the cleanest solution. I'll accepts your answer. Thanks! –  Jan 17 '17 at 14:02
2

You need to basically use the following syntax for your option tag (use ng-selected):

<select ng-model="formCtrl.isAdmin">
    <option ng-value="true" ng-selected="formCtrl.isAdmin">Yes</option>
    <option ng-value="false" ng-selected="!formCtrl.isAdmin">No</option>
</select>
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
0

Use ng-options:

<select ng-model="form.isAdmin" 
        ng-options="opt.val as opt.name for opt in [{val:true,name:'Yes'},{val:false,name:'No'}]">
</select>

See this jsfiddle

devqon
  • 13,818
  • 2
  • 30
  • 45