How to set value in select option dynamically in angular

Question

I have a select option as below

<div class="input-field col width">
  <select name="GENDER" class="genderSelect" ng-model="view.activeResource.ValueType" ngModel>
    <option value="" disabled selected>Choose your option</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <label>Gender</label>
</div>

Now what i did is saved the data when i wanted to save. My issue which i am facing is set the same saved value to this select option. I am able to get my value but just setting the same value is not working for me. If trying to set the value using jquery then when i click on save button again data going as null value.

Not sure what is the right way to set value using angular.

Answer 1

You can use [selected] attribute in every option to compare their values to the one you saved.

<option value="male" [selected]="savedGenderExample === 'male'">Male</option>