phantom phantom - 3 months ago 13
AngularJS Question

Showing values from object in select dropdown angular

From an API call I am receiving an object that looks like this and assigning it to

$scope.countries
:

$scope.countries = {
AU:"Australia",
BE:"Belgium",
US:"United States"
}


In my front end I want to add each country to a dropdown list, so that it will show the full country names like the below. I have taken many different approaches but cannot get it to work.

- Australia
- Belgium
- United States


Please see my code below:

<select ng-options="(key, value) in countries" ng-change="getRoles()">

Answer

Try this ,

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.countries = {
AU:"Australia",
BE:"Belgium",
US:"United States"
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
 <select ng-model="country" ng-options="key as value for (key , value) in countries"></select>
</body>