How to populate a value in a select ( HTML ) list in AngularJS

Question

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).

I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?

I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.

(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")

Lets say there is something like this:

<div class="col-md-8">
   <select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
 <option value="" disabled selected>Select</option>
 <option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Answer 1

Use ngOptions.

<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

Answer 2

With ng-options you can do it like this:

<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
    <option value="" disabled selected>Choose a Country</option>
</select>
</div>

The location.id is set to the options value and the location.name is set to the text.

To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic