Angular default option selected attribute not working as expected

Question

I would like to select the first option from the dropdown list. However, when I set [attr.selected]="index == 1" or [attr.selected]="index == 0" its not working but if I change the index value condition to [attr.selected]="index == 2", it works. Although the index starting from 0 to 2 is present.

<select formControlName="segmentforOverlapOne" class="form-control overlap-segment-1">
  <option [attr.selected]="index == 1" *ngFor="let segment of segmentations; let index=index;" [ngValue]="index">{{segment.name}}</option>
</select>

Below is the segmentations array:

[
  {
    "name": "name 1",
    "columns": [
      {
        "index": 0,
        ...
      }
    ],
  },
  {
    "name": "name 2",
    "columns": [
      {
        "index": 1,
        ...
      }
    ],
  },
  {
    "name": "name 3",
    "columns": [
      {
        "index": 2,
        ...
      }
    ]
  }
]

Answer 1

try like this :

<select formControlName="segmentforOverlapOne" class="form-control overlap-segment-1"> 
    <option *ngFor="let segment of segmentations; let i = index" [attr.value]="i" [attr.selected]="i == 0 ? true : null">{{segment.name}}</option>
</select>