Ng-selected attribute is not working on ion-select

Good Day Everyone!

PROBLEM: Failed to display a selected option from a dynamic ion-select


I have two ion-select (dropdown), one for the city field and one for the barangay field. The barangay field displays dynamic values based on the selected city. This works properly but when I try to display a selected value, it doesn’t work.


                  <!-- City -->
                  <ion-item class="form-field">
                    <ion-label stacked>City</ion-label>
                    <ion-select [(ngModel)]="city" (ionChange)="getBarangay('house')">
                      <ion-option value="Caloocan (NORTH) City" ng-selected="city == 'Caloocan (NORTH) City'">Caloocan City</ion-option>
                      <ion-option value="Caloocan (SOUTH) City" ng-selected="city == 'Caloocan (SOUTH) City'">Caloocan City</ion-option>
                      <ion-option value="Las Piñas City" ng-selected="city == 'Las Piñas City'">Las Piñas City</ion-option>
                      <ion-option value="Makati City" ng-selected="city == 'Makati City'">Makati City</ion-option>
                      <ion-option value="Malabon City" ng-selected="city == 'Malabon City'">Malabon City</ion-option>
                      <ion-option value="Mandaluyong City" ng-selected="city == 'Mandaluyong City'">Mandaluyong City</ion-option>
                      <ion-option value="Manila City" ng-selected="city == 'Manila City'">Manila City</ion-option>
                      <ion-option value="Marikina City" ng-selected="city == 'Marikina City'">Marikina City</ion-option>
                      <ion-option value="Muntinlupa City" ng-selected="city == 'Muntinlupa City'">Muntinlupa City</ion-option>
                      <ion-option value="Navotas City" ng-selected="city == 'Navotas City'">Navotas City</ion-option>
                      <ion-option value="Parañaque City" ng-selected="city == 'Parañaque City'">Parañaque City</ion-option>
                      <ion-option value="Pateros City" ng-selected="city == 'Pateros City'">Pateros City</ion-option>
                      <ion-option value="Pasay City" ng-selected="city == 'Pasay City'">Pasay City</ion-option>
                      <ion-option value="Pasig City" ng-selected="city == 'Pasig City'">Pasig City</ion-option>
                      <ion-option value="Quezon City" ng-selected="city == 'Quezon City'">Quezon City</ion-option>
                      <ion-option value="San Juan City" ng-selected="city == 'San Juan City'">San Juan City</ion-option>
                      <ion-option value="Taguig City" ng-selected="city == 'Taguig City'">Taguig City</ion-option>
                      <ion-option value="Valenzuela City" ng-selected="city == 'Valenzuela City'">Valenzuela City</ion-option>
                      <ion-option value="Other" ng-selected="city == 'Other'">Other</ion-option>

                  <!-- Barangay ** IF CITY IS SELECTED -->
                  <ion-item class="form-field" *ngIf="city != 'Other'">
                    <ion-label stacked>Barangay</ion-label>
                    <ion-select  placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">
                      <ng-container *ngFor="let bl of barangayList let i = index">
                        <ion-option ng-selected="barangay == barangayList[i].name" value="{{i}}">{{barangayList[i].name}}</ion-option>
                    <ion-label error-field no-margin *ngIf="!isBarangayValid"><ion-icon name="ios-alert"></ion-icon> Please select one.</ion-label>


  getBarangay(property) {
    var city = property == 'house' ?' City', '') : this.businessCity.replace(' City', '');
    if (property == 'house') {
      this.barangayList = [];
    } else if (property == 'business') {
      this.businessBarangayList = [];

    if ((property == 'house' && != 'Other') || (property == 'business' &&  this.businessCity != 'Other')) { 
      let headers = new Headers ({
        'Accept' : 'application/json'
      let options = new RequestOptions({ headers : headers });

      return new Promise((resolve, reject) => { + city + '/brgy',  options)
        .then((response) =>
          // console.log('Get Barangay List API Response : ', response.json());
          var _response = response.json();
          if (property == 'house') {
            for (let element in _response) {  
                name: element.trim(),  
                code: _response[element]
          } else if (property == 'business') {
            for (let element in _response) {  
                name: element,  
                code: _response[element]
        .catch((error) =>
          if ( == 'TimeoutError') {
          } else {

  setBarangay(property) {
    if (property == 'house') {
      this.barangayCode = this.barangayList[this.barangayId].code;
      this.barangay = this.barangayList[this.barangayId].name;
    } else if (property == 'business') {
      this.businessBarangayCode = this.businessBarangayList[this.businessBarangayId].code;
      this.businessBarangay = this.businessBarangayList[this.businessBarangayId].name;

Fig 1. There is no displayed/selected option

Fig 2. Displays all the barangay of a selected city

I hope someone can help me with this. Thank you :slight_smile:

Old but still perhaps relevant.

Thank you for your reply.

After I checked the link you’ve sent, unfortunately, it isn’t the answer I am looking for.

I can already make the barangay field dynamic. My problem is, how will I choose a selected option at the first load of the page.

Here is the flow:

  1. User will register with his info including city and barangay.
  2. After redirecting to his dashboard, it’ll display all the info he submitted including city and barangay.
  3. User will edit his info but all of the fields should be filled with the information he already submitted. (this is my problem, because I can list all the barangay list dynamically based on city but I cannot display the barangay on the field that the user already submitted in the registration.)

Thank you :slight_smile: