Angular2 [selected] issue with Chrome

Question

myValues

{
    "level": [
        {
            "name": "Zero Level",
            "value": 0
        },
        {
            "name": "First Level",
            "value": 1
        }
    ]
}

Select Box

<select [(ngModel)]="form.cache.level" name="level" required>
    <option
        *ngFor="let levelof myValues.level"
        [selected] ="level.value === 0"
        [value]="level.value">
        {{ level.name }}
    </option>
</select>

despite of fact, that the level.value === 0 is true, it won't be selected in Chrome. (Firefox and IE work)

As workaround I initialize:

form.cache.level = 0  

But I would like to know, why does it not work with Chrome? (Here is a playground for further analysis)

Answer 1

Using ngModel overrides the behavior of the selected attribute, so if you choose the model you always should set the bound value instead of trying to modify the selection with option attributes.

It's probably working accidentally in Firefox/IE.