Material Select : Not able to select a value of dropdown aft

I am currently using Material Select Angular version.

I have component where i have 2 material select. One for country and another for state.

///Component HTML start

<div class="col-12 col-lg-6">
<div class="form-group">
<div class="mdb-select" *ngIf="countries != undefined && countries.length>0">
<mdb-select formControlName="country" [options]="countries" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
<label>Country</label>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<div class="mdb-select" *ngIf="states != undefined && states.length>0">
<mdb-select formControlName="state" [options]="states" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
<label>State</label> 
</div>
</div>
</div>

///Component HTML end
Below is the code how i create Form controls and bind array.
// TS start

export class EmployeeComponent implements OnInit, OnDestroy, AfterViewInit {

country: FormControl;
state: FormControl;

countries: Array<any> = [];
states: Array<any> = [];

ngOnInit() {

this.country = new FormControl();
this.state = new FormControl();

this.profileForm = new FormGroup({

country: this.country,
state: this.state
});

getCountries();
this.country.valueChanges
.subscribe(res => {
this.getStates(res);

});

setValue();

}
setValue()
{
this.country.setValue("AE"); // This works

// below code did not work because dropdown is filled with data afterwords.
//To make it work i need to add *ngIf in HTML so that FormControl does not load before we get data.
this.state.setValue("AE_AZ");

}
//method to bind countries
getCountries(){
this.dataService.getCountries<any>().subscribe(response => {

if (response.errorCode != null && response.errorCode == 0) {
this.countries = [];
if (response.countries != (null && "")) {
let optionlist: any[] = [];
response.countries.forEach(country => {
let option = { value: country.countryId, label: country.name };
optionlist.push(option);
});
this.countries = optionlist.slice();
}
}
else {
console.log("Error in 'getCountries' method " + response.errorMessage);
}
},
error => console.log("Error in 'getCountries' method " + error));
}
//Below method is used to bind dropdown of countries
getStates(countryid: string) {

if (countryid != (null && "")) {
this.dataService.getStates<any>(countryid).subscribe(response => {

if (response.errorCode != null && response.errorCode == 0) {
this.states = [];
if (response.states != (null && "") && response.states.length > 0) {

let optionlist: any[] = [];
response.states.forEach(state => {
let option = { value: state.stateId, label: state.name };
optionlist.push(option);
});

this.states = optionlist.slice();

// If I put this code here still it does not select the value as the selection or set event of select component under pro/material-select is getting fired first
// at thant time there is no value in optionlist of select component. Once it comes out it calls OnChanges event of select component to set the array value.

//This works fine on first page load but when your page and controls are loaded it works as above.
this.state.setValue("AE_AZ");
}
}
else {
console.log("Error in 'getStates' method " + response.errorMessage);
}
},
error => console.log("Error in 'getStates' method " + error));
}

}
Revert()
{
setValue();
}
}

// TS end

Please provide us the way to select the value in case when page is loaded and we want to make some value selected after re-binding the dropdown on.