PrimeNg - P-dropdown ngModel not updating selected value

Question

<p-dropdown [options]="userRole" [(ngModel)]="rowData.role"
      optionLabel='description'  (onChange)="modifyRole($event)">
    </p-dropdown>

<span> {{rowData.role}} </span>

Here in span i can see this value getting updated as required! But not making dropdown get that value as selected value by default!

userRole picked from static.model.ts

userRole as defined below

{
'description': 'Admin'
},
{
'description': 'CMD'
}

Now in .ts file based on some conditions i have to make dropdown get default value -

either 'Admin' or 'CMD'

But dropdown is not getting default value. Where as rowData.role used as ngModel is getting updated when i show it to crosscheck.

So how to make this ngModel = rowData.role change dropdown selected value also?

Answer 1

Answering my question: ngModel binds by reference, not value.

Hence for this we need to update [options]="userRole"

Updating userRole with required selected value will always update the dropdown selectedValue. Cheers..!