Angular: "checked" attribute of radio input not working as expected

Question

In the code shown below,

I am iterating over deliveryMethods which are displayed in the view as radio buttons. I intend to have the first radio button pre-selected.

I applied the following attribute:

[checked]="ndx==0"

where ndx is the index of each iteration. But none of the radio button is checked.

How do I dynamically pre-select the first radio button?

<div *ngFor="let dm of deliveryMethods; let ndx=index">
   <label class="form-check-label">
      <input class="form-check-input f-s-1pt2" type="radio" 
             name="dm.name" 
             value="{{dm.name}}" 
             [(ngModel)]="item.item.deliveryMethod"
             (change)="filterProducts(item)"
             [checked]="ndx==0"
             class="radio-dimension"> 
             {{dm.label}}
   </label>
</div>

Answer 1

I have removed the [(ngModel)] and use property binding with [value] to bind the value to the radio button control . The below code works for me

<div *ngFor="let dm of deliveryMethods; let ndx = index">
              <label class="form-check-label">
                    <input class="form-check-input f-s-1pt2" type="radio" 
                      name="dm.name" 
                      [value]="dm.name"
                      (change)="filterProducts(item)"
                      [checked]="ndx === 0"
                      class="radio-dimension"> 
                      {{dm.label}}
             </label> 
       </div>

Here is a working plunker https://plnkr.co/edit/6Ay2zr7Ow3csB5Pxdgdz?p=preview