Prepopulate Dropdown with Object

Question

I am trying to create a dropdown and want to prepopulate it with object.

<script>
angular.module("myapp", [])
  .controller("MyController", function($scope) {      
    $scope.country = {
        id: "2",
      name: "USA"
    };

    $scope.countries = [{
      id: "1",
      name: "India"
    }, {
      id: "2",
      name: "USA"
    }, {
      id: "3",
      name: "UK"
    }, {
      id: "4",
      name: "Nepal"
    }];
  });
</script>

<div>
  Country Name :
  <select ng-model="country" ng-options="country as country.name for country in countries"></select>
</div>

But the countries dropdown is not being prepopulated with country object.I am not sure what is the problem.

JSFIDDLE link :http://jsfiddle.net/6qo3vs6c/

Did you mean default value of `ng-options`? If this is what you looking for, see more [here](http://stackoverflow.com/questions/20845210/setting-selected-values-for-ng-options-bound-select-elements). — DieuNQ, Oct 11 '16 at 08:52
I want the default value from separate object...how can I do that?? — ishmam shahriar, Oct 11 '16 at 09:06
use your fiddle properly. no issues with code. http://jsfiddle.net/codeandcloud/6qo3vs6c/1/ — naveen, Oct 11 '16 at 09:28

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

Remove country as and add track by country.id in ng-options.

<select ng-model="country" ng-options="country.name for country in countries track by country.id"></select>

Here is your. See more.

Hope this helps.

edited May 23 '17 at 12:19

Community

1
1

answered Oct 11 '16 at 09:20

DieuNQ

975
1
7
11

Prepopulate Dropdown with Object

1 Answers1