How to bind dropdown control in edit mode?

Question

I am having a list of country along with its corresponding states.

Now i want to bind the country and state value in dropdown control when open in edit mode.

Answer 1

You can use ng-repeat

<select data-ng-show="friend.editMode" ng-model="friend.Country.Name">
    <option ng-repeat="country in countries" value="{{country}}" ng-selected="friend.Country.Name==country">{{country}}</option>
</select>   

Or use ng-options

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

In your controller define an array of countries.

$scope.countries = ['America', 'Australia', 'london'];

Answer 2

Here is what you wanted you could use ng-options for both select box for states & countries.

HTML

<td>
    <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p>
    <select data-ng-show="friend.editMode" ng-model="friend.Country" ng-options="country.Name for country in countries track by country.Id "></select>
</td>
<td>
    <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p>
    <select data-ng-show="friend.editMode" ng-model="friend.State" ng-options="state.Name for state in states track by state.Id "></select>
</td>

Controller

$scope.countries = [{
    "Id": 1,
    "Name": "America",
}, {
    "Id": 2,
    "Name": "Australia",
}, {
    "Id": 3,
    "Name": "london",
}];

$scope.states = [{
    Id: 1,
    CountryId: 1,
    Name: "Chicago",
}, {
    Id: 2,
    CountryId: 2,
    Name: "sydney",
}, {
    Id: 3,
    CountryId: 3,
    Name: "abc",
}];

Working Fiddle

Note

Used track by id for selecting option on load as suggest in this github issue