| AngularJS (ng1) / TS / PhoneGap | on iOS <select> will display the wrong option, but model contains correct option

Question

framework: Angular 1

platform: iOS

When using a <select> on iOS, the view will display the next <option> in the list once one is chosen while the model will contain the correct value.

If we press the again the option that the view was showing is presented as the currently select option. When choosing a separate option the view and the model seem to line up correctly.

Creation of the Arrays in TS:

ConfigureHairOptions() {
    this.HairOptions.Options.push({ Id: 0, Value: "Blonde" });
    this.HairOptions.Options.push({ Id: 1, Value: "Black" });
    this.HairOptions.Options.push({ Id: 2, Value: "Red" });
    this.HairOptions.Options.push({ Id: 3, Value: "Gray" });
    this.HairOptions.Options.push({ Id: 4, Value: "White" });
    this.HairOptions.Options.push({ Id: 5, Value: "Bald" });
    this.HairOptions.Options.push({ Id: 6, Value: "Brown" });
    this.HairOptions.Options.push({ Id: 7, Value: "Sdy" });
}

HairOptions is of type Selector:

interface Option {
    Id: number;
    Value: string;
}
class Selector {
    Options: Array<Option>
    Selected: Option;

    constructor() {
        this.Options = [];
    }
}

and finally the views are bound like so:

<select ng-model="ctrl.HairOptions.Selected"
        ng-options="option.Value for option in ctrl.HairOptions.Options track by option.Id"
        class="lg-select">
</select>

The pickers that appear in browser and Android do not suffer from this problem. Kind of at a loss for what is happening here. By default nothing is selected which creates kind of a blank value in the list which is not present upon pressing the <select> a second time. I'm thinking this is the venom but not sure the remedy.

Answer 1

Consider adding a null option:¹

<select ng-model="ctrl.HairOptions.Selected"
        ng-options="option.Value for option in ctrl.HairOptions.Options track by option.Id"
        class="lg-select">
     <option value="" disabled>Select HairOption...</option>
</select>

Then the blank value will not added and removed.