Элемент не выбран из выпадающего списка (Angular Js)

Question

Я выбираю элемент из раскрывающегося списка категории и хочу сохранить его как объект в консоли из формы, управляемой шаблоном.

Но я получил категорию не определена.

Вот мой код шаблона формы: -

<form #f="ngForm" (ngSubmit)="save(f.value)">
        <div class="form-group">
          <label for="title">Title</label>
          <input ngModel name="title" id="title" type="text" class="form-control" >
        </div>

        <div class="form-group">
          <label for="price">Price</label>
          <div class="input-group">
            <span class="input-group-append">$</span>
            <input ngModel name="price" id="price" type="number" class="form-control">
          </div>
        </div>
                   
        **<div class="form-group">
          <label for="category">Category</label>
          <select ngModel name="category" id="category" type="text" class="form-control">
            <option value=""></option>
            <option *ngFor="let c of categories$ | async" [value]="c.$key">
              {{ c.name }}
            </option>
          </select>
        </div>**  

        <div class="form-group">
          <label for="imageUrl">Image URL</label>
          <input ngModel name="imageUrl" id="imageUrl" type="text" class="form-control" >
        </div>        
        <button class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-danger">Delete</button>
    </form>   

Снимок экрана

Не могли бы вы объяснить, почему категория "Не определено"

База данных Firebase: - Категория базы данных Firebase