mdb-select async data not working (binding problem?)

Hello,

I'm using MDB Pro Angular 6.1.6 and I'm having an issue with a simple select, if my options are static data it all works fine however as soon as I request data from a web service the select is always empty, it looks like the binding is not properly done.

Below is the code snippets for the pertinent code, I tried a few things but I cannot get it working unless it's static data, am I doing something wrong? as this seems a pretty standard functionality to me

HTML

<form #searchForm="ngForm" (ngSubmit)="doSearch()">

<div class="row m-2 form-group" *ngIf="depots">
<div class="col-sm-6 " *ngIf="depots">
<mdb-select [(ngModel)]="search.fromDepotSelect"
id="fromDepot" name="fromDepot" [options]="depots" title="Dépôt de début" mdbWavesEffect>
</mdb-select>
<label class="mr-sm-2" for="fromDepot">Dépôt début:</label>
</div>

<div class="col-sm-6" *ngIf="depots">
<mdb-select [(ngModel)]="search.toDepotSelect"
id="destinationDepot" [options]="depots" name="destinationDepot" title="Dépôt de fin" mdbWavesEffect>
</mdb-select>
<label class="mr-sm-2" for="destinationDepot">Dépôt fin:</label>
</div>
</div>

Component

export class AffectationsComponent implements OnInit {

depots: any[];

constructor(private blockService: BlockService, private depotService: DepotService) {
}

ngOnInit() {

this.depotService.findAll().subscribe(depots => {

    this.depots = [];
  depots.forEach( d => {
    this.depots.push({value: d.id, label: d.displayName});
    console.log(d.displayName);
  });

  }
);
}

And finally this is the code in the service :

findAll(): Observable<Depot[]> {
  return this.http.get<Depot[]>(AppSettings.DEPOT_API_URL);
}