title: Unable to show HTML select option initially when starting the page in Angular
body: <p>in my ts file I've defined this :</p>
  <pre><code>  statuses = [
      { id: 1, name: &quot;Approved&quot; },
      { id: 2, name: &quot;Created&quot; },
      { id: 3, name: &quot;Rejected&quot; },
      { id: 4, name: &quot;Cancelled&quot; },
    ];
  </code></pre>
  <p>in my HTML here is the code</p>
  <pre><code>&lt;div class=&quot;col-1&quot; id=&quot;statusFilter&quot;&gt;
        &lt;label class=&quot;font-weight-bold text-secondary&quot; for=&quot;statusFilter&quot;&gt;Filter By Status:&lt;/label&gt;
        &lt;select
          [(ngModel)]=&quot;statusFilter&quot;
          class=&quot;form-control&quot;
          (change)=&quot;setStatusFilter()&quot;&gt;
          &lt;option value=&quot;'Choose'&quot; disabled selected&gt;&lt;strong&gt; Choose Filter: &lt;/strong&gt;&lt;/option&gt;
          &lt;option *ngFor=&quot;let status of statuses&quot; [value]=&quot;status.name&quot;&gt;
              {{ status.name }}
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>what appears in the Angular App is this empty select,
  my goal is to make the first  tag show its value 'Choose Filter: ' before selecting anything</p>
  <p>here is how it currently appears:
  <a href="https://i.stack.imgur.com/fANlI.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>and this is what I need it to appear
  <a href="https://i.stack.imgur.com/DH0SU.png" rel="nofollow noreferrer">desired result</a></p>
  <p>and for information this is how the select list would appear if I click it, I would be able to see that disabled option inside of it only if clicked but not by default
  <a href="https://i.stack.imgur.com/OsoLC.png" rel="nofollow noreferrer">select list clicked</a></p>
  <p>Any idea what i'm doing wrong in here ?</p>