I have a list of types in my component.ts as followed.

```
  public type: string;
  types:Array<Object> = [
      {name: "Category", value: "c"},
      {name: "Cuisine", value: "a"},
      {name: "Main Ingredient", value: "i"},
  ];

```

And here is the corresponding HTML code.

```
<select class="form-control" id="queryTypeSelect" [(ngModel)]="type" name="queryTypeSelectForm"> 
    <option *ngFor="let typ of types" [value]="typ.value">{{ typ.name }}</option>
</select>

```

In the constructor, I have initialized "type" like this:

```
  constructor(
    private recipeService: RecipeService, 
    private apiService: ApiService) { 
      this.type = this.types[0]["name"];

  }

```

But when loading the page, the select bar shows nothing, until I manually select something. Although when selecting, the default item shows as checked (the first entry).

Why is this happening? When I remove the value property from the option, it shows the default entry alright. But I need to have the value property.

What is going wrong here? Any kind of help would be appreciated.