How do I set the default select value on an array of objects?

I have a select that binds to a collection of objects. I wanted to add a default value "Please select" but I can't seem to get it to select the item by default:

<select [(ngModel)]="ingredient.definition" class="form-select" name="ingredient{{ i }}">
  	<option value="" disabled selected>Please select</option>
   	<option *ngFor="let definition of definitions" [ngValue]="definition" [disabled]="disableOption(definition)">{{ definition.name }}</option>
</select>

<button type="button" class="btn btn-primary d-block" [disabled]="disableAdd()" (click)="addIngredient()">Add ingredient</button>

Here is my definition interface:

export interface Definition {
  id: number;
  name: string;
  measurement: string;
  unit: string;
  measurementToUnit: number;
  unitPrice: number;
}

and my ingredient interface:

import { Definition } from './definition';

export interface Ingredient {
  quantity: number;
  definition: Definition;
}

The select is dynamically added, so upon adding the select I execute the following to create an empty object:

addIngredient(): void {
    let ingredient: Ingredient = {
      quantity: 0,
      definition: {} as Definition
    }
    this.model.ingredients.push(ingredient);
}

Since the definition object on my property is empty, I was hoping the select would automatically highlight the empty default option, however this isn't the case:

I've also tried creating a dummy definition object with the name "Please select" and adding that to the definitions collection, however that doesn't seem to work either.

Does anyone know the correct way to get this working?

Thanks

I came across such scenarios a couple of times as this issue arises due to indexing of options dynamically populating.

Instead of ngModel and ngValue, try using formControl and patchvalue.

TS:

public defaultSelectName: string = 'someOption';

public optionsForm: FormGroup = new FormGroup({
    options: new FormControl(null, {validators: Validators.nullValidator})
});

public setDefaultOption(): void {
    const matchedIndex= this.definitions.findIndex(definition => definition.name === defaultSelectName);
    if (matchedIndex) {
        this.optionsForm.get('options')!.patchValue(this. definitions[matchedIndex].name)
    }
}

by doing so, you're explicitly setting the default selected value along with its index.

so following on from @Eliseo's suggestion, I managed to get it to work with:

<option [value]="{}" disabled>Please select</option>

Thanks so much