It seems like there should be a simple solution to this issue, but I'm struggling to get ng-options to work with my model object. Essentially, I want to populate my select dropdown with a list of countries. Each option value should be a country code and the label should display the country name:
My HTML Code
<div ng-app="demoApp">
<div ng-controller="UserInfoCtrl">
<h1>User Info</h1>
<label>Email</label>
<input type="text" ng-model="user.email" />
<br />
<label>Country</label>
<select ng-model="user.country" ng-options="code as name (code, name) in countriesByCode">
</select>
<pre>{{ user | json }}</pre>
</div>
</div>
My JavaScript Code
var demoApp = angular.module('demoApp', []);
demoApp.controller("UserInfoCtrl", function($scope) {
$scope.user = { };
$scope.countriesByCode = {
'AF' : 'Afghanistan',
'CA' : 'Canada',
'RU' : 'Russia'
};
});
For more information, check out the jsfiddle link.