Ionic: как динамически установить элемент на ion-select?

Question

Я пытаюсь создать форму с полями Штат и Город, поэтому, когда я меняю Штат, загружаются города из этого выбранного Штата:

<ion-item>
  <ion-label stacked>State*</ion-label>
  <ion-select formControlName="stateId" (ionChange)="updateCities()">
    <ion-option *ngFor="let state of states" value="{{state.id}}">{{state.name}}</ion-option>
  </ion-select>
</ion-item>
<ion-item>
  <ion-label stacked>City*</ion-label>
  <ion-select formControlName="cityId">
    <ion-option *ngFor="let city of cities" value="{{city.id}}">{{city.name}}</ion-option>
  </ion-select>
</ion-item>

Ts файл:

  updateCities() {
    let state_id = this.formGroup.value.stateId;
    this.cityService.findAll(state_id)
      .subscribe(response => {
        this.cities= response;
        this.formGroup.value.cityId = this.cities[0].id;
      });
  }

Обратите внимание, что я также заставляю свой formGroup.value.cityId быть первым городом из новой загруженной коллекции (я не уверен, что это хорошая практика). Тем не менее, город не выбран в ion-select. Итак, как я могу принудительно выбрать города [0] в моем списке выбора ионов, когда я изменяю состояние в своей форме?