title: Angular model loading before select list items are loaded
body: <p>I have a select list where the items are loaded from an observable API call</p>
  
  <pre><code>  getAccounts(): Observable&lt;IAccount[]&gt; {
      let token = localStorage.getItem("jwt");
  
      // fetch the accounts from the server
      return this.http.get&lt;IAccount[]&gt;(this.baseUrl + "api/account/search",
        {
          headers: new HttpHeaders({
            "Authorization": "Bearer " + token,
            "Content-Type": "application/json"
          })
        });
    }
  </code></pre>
  
  <p>In the component, I am calling this service along with others to get all the reference data for the select list items. I am also calling a service that gets the model related to the component.</p>
  
  <pre><code>  ngOnInit() {
      this.loadFormReferences();
      this.getInvoice();
    }
  
    async loadFormReferences() {
      return await Promise.all([
        this.contactService.getContactSummaries(),
        this.productService.getProducts(),
        this.accountService.getAccounts()
      ]).then(res =&gt; {
        res[0].subscribe(res =&gt; {
            this.customers = res;
            console.log(this.customers);
          }),
          res[1].subscribe(res =&gt; {
            this.products = res;
            console.log(this.products);
          }),
          res[2].subscribe(res =&gt; {
            this.accounts = res;
            console.log(this.accounts);
          });
      });
    }
  
  
   getInvoice() {
      var id = this.activatedRoute.snapshot.params["id"];
      this.editMode = true;
  
      this.invoiceService.getInvoice(id).subscribe(res =&gt; {
          this.invoice = res;
        },
        error =&gt; console.error(error));
   }
  </code></pre>
  
  <p>The problem is that the components model loads before all the select list items are loaded, resulting in the item not being selected. If the reference data does load before the model then everything displays correctly.</p>
  
  <p>How do I force it to load the reference data before loading and displaying the model? Or can I have the selected item updated when the items have finished? I am using the following html to display the items in a custom autocomplete drop down.</p>
  
  <pre><code>        &lt;ng-container matColumnDef="account"&gt;
            &lt;mat-header-cell *matHeaderCellDef&gt; Account &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt;
              &lt;autocomplete id="HireLine-AccountName-" [ngModel]="element?.accountId" (ngModelChange)="element.accountId = $event" [items]="accounts" key="id" value="name"&gt;&lt;/autocomplete&gt;
            &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  </code></pre>