title: correct way to populate angular7 select options with remote data?
body: <p>I'm trying to load select options async from a remote source (Google calendar API).</p>
  
  <p>I can load options remotely from a non-google source: <a href="https://stackblitz.com/edit/angular-wwhqzl" rel="nofollow noreferrer">stackblitz</a> </p>
  
  <p>But when I try to load from Google API, it doesn't render the options UNTIL I click the select dropdown OR I set the value (<code>FormControl.setValue()</code>) from a button click.</p>
  
  <p>Why?  The only way I can get it to work is by calling <code>ChangeDetectorRef.detectChanges();</code> after calling <code>FormControl.setValue()</code>.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-zkwzqg" rel="nofollow noreferrer">Here</a> is a stackblitz that shows the problem.</p>
  
  <p>A few notes on the non-working stackblitz:</p>
  
  <ol>
  <li>It requires you to login via Google, and grant my Client ID read access to your calendars.  You can look at my source and see I'm doing anything nefarious. You can also revoke access from your <a href="https://myaccount.google.com/permissions" rel="nofollow noreferrer">google permissions page</a>, my App name is <code>ShiftCals</code>.</li>
  <li>Open the <code>Console</code> in stackblitz. It will tell you when the select options (calendars) have been loaded from Google API.</li>
  <li>To re-produce, click the login with google button, then wait for select box to show up.  It will be empty. Clicking on select or pressing <code>set 1st option</code> will force the select to re-render.</li>
  <li>To re-run a test iteration, you need to reload the stackblitz preview frame.</li>
  </ol>
  
  <p>My hunch is the problem is due to some timing issue, however I can't figure it out.  Thanks in advance for your help.</p>