Angular 2 - Dropdown values from http call not loaded

Question

My component.html will be ,

<div>_{{defaultFacilityList | json}}_</div>

<div class='form-group' style="width: 100%;">
    <div class="btn-group" style="width: 100%;">
            <button type="button" class="btn btn-default" style="width : 75%;text-align: left;">{{defaultFacilityName}}</button>
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu" style="width: 75%;">
                 <li *ngFor="let facility of defaultFacilityList" ><a class="dropdown-item" (click)="updateDefaultFacilityId(facility.facilityId , facility.facilityName)" >{{facility.facilityName}}</a>
                </li>
            </ul>
        </div>

    </div>
</div>

My component.ts is,

import {Component, OnInit, Input, Output, OnChanges, EventEmitter, ChangeDetectionStrategy, SimpleChanges} from '@angular/core';
import { FacilityPopupService } from '../../services/facility-popup.service';


@Component({
  selector: 'default-facility-popup',
  templateUrl: './facility-popup.component.html',
  styleUrls: ['./facility-popup.component.css'],
  providers: [FacilityPopupService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FacilityPopupComponent implements OnInit{

  defaultFacilityId: string;
  defaultFacilityName : string;
  defaultFacilityList : any;
  enterpriseId : string;


  constructor(private facilityPopupService: FacilityPopupService) { }


  ngOnInit() {
    //this.defaultFacilityId = null;
    this .defaultFacilityName = "SELECT";
    this.enterpriseId = "EID1";
    this.defaultFacilityList = [{"facilityId" : "F1", "facilityName" : "FONE"}, {"facilityId" : "F2", "facilityName" : "FTWO"},{"facilityId" : "F3", "facilityName" : "FTHREE"}, {"facilityId" : "F4", "facilityName" : "FFOUR"}];
    this.getFacilityList(this.enterpriseId);
  }


   getFacilityList(enterpriseId : string) :void{
        this.facilityPopupService.getAssociatedFacilityList(enterpriseId)
          .subscribe(
              data =>   {
                            console.log("response ************ \n"+JSON.stringify(data));
                            console.log("BEFORE : "+JSON.stringify(this.defaultFacilityList));
                            this.defaultFacilityList = null;
                            console.log("AFTER : "+this.defaultFacilityList);
                            this.defaultFacilityList = data.response.facilityList;
                             console.log("LATER : "+JSON.stringify(this.defaultFacilityList));
                            this.enterpriseId = data.response.enterpriseId;
                        },
              error => console.log("Error in Component"),
              () => {
                //this.manageResult()
                console.log("Service call completed");
                console.log("this.defaultFacilityList : "+JSON.stringify(this.defaultFacilityList));
                console.log("this.enterpriseId : "+this.enterpriseId);
                //this.defaultFacilityList = [{"facilityId" : "F1", "facilityName" : "FONE"}, {"facilityId" : "F2", "facilityName" : "FTWO"}];
                document.getElementById("facilityIdModalButton").click();
              }
          );
   }


   updateDefaultFacilityId(facilityId : string, facilityName : string) : void {
        console.log("*********** defaultFacilityId : "+facilityId +"\n********* defaultFacilityName : "+facilityName);
        this.defaultFacilityId = facilityId;
        this.defaultFacilityName = facilityName;
   }

}

My console displays with out any error. It will be,

response ************ 
{"request":{"url":"/getFacilityList"},"response":{"enterpriseId":"EID1","facilityList":[{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]},"error":""}
BEFORE : undefined
AFTER : null
LATER : [{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]
Service call completed
this.defaultFacilityList : [{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]
this.enterpriseId : EID1

There is no error. Also the dropdown values are not loaded.

First time it loaded with default valuesn

Then After selecting any value in the dropdown, it got resolved like,

Please help me to solve this issue.

Note :

1. I suspect that there is some rendering issue.

2. Also it may be occured , because late response from http call.