Set selected option after dynamically load select

Ionic Framework ionic-v3
1

Hi,

I have 2 select in ionic 2 and i am able to dynamically populate the second based on the value selected in first. but i cannot set the selected default option after the population. i tried:

 <ion-item>
     <ion-label>City</ion-label>
     <ion-select  (ionChange)="setCity($event)">
     <ion-option selected >City1</ion-option>
     <ion-option >City2</ion-option>
  </ion-select>
 </ion-item>

 < ion-item>
   <ion-label>Zone</ion-label>
    <ion-select >
        <ion-option  *ngFor ="let location of locations[city]" 
             [selected] = location.selected >
            {{location.zona}}
      </ion-option>
    </ion-select>
  </ion-item>

  in .ts

  this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
              'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}

   setCity(event){
       this.city = event;
   }

thanks all

2

Maybe relevant.