title: AngularJS - display a default option at the top of a dynamic select dropdown list?
body: <p>Goal: Make a default <code>&lt;option&gt;</code> always appear at the top of a <code>&lt;select&gt;</code> dropdown when it's opened.</p>
  
  <p>I'm halfway to my goal.  We have a dropdown that populates depending on whether other elements are selected, and the 'Text' option correctly appears as the default.  I've added <code>orderBy:</code> which sorts the list alphabetically by their <code>label</code>, which the first fix that we want.  But we also want the 'Text' option to always appear at the top of the list when the dropdown is opened.</p>
  
  <p>The HTML for this dropdown:</p>
  
  <pre><code>&lt;select ng-options="t.id as t.label for t in currentOptions | orderBy:'label'" 
  ng-model="rule.field" 
  ng-change="updateOptions(rule, $index, true)" 
  ng-init="updateOptions(rule, $index)" title="{{rule.label}}" 
  class="form-control" style="width:100%" required&gt;&lt;/select&gt;
  </code></pre>
  
  <p>The currentOptions array is similar to this:</p>
  
  <pre><code>currentOptions{"Text", "Banana", "Apple", "Notebook", "Coffee", "Zebra"}
  </code></pre>
  
  <p>When it first appears in the browser view, it shows Text in the clickable field, as it's in the [0] position in the array.  When I open the dropdown, the visible list reads like this: "Apple" "Banana" "Coffee" "Notebook" "Text" "Zebra"</p>
  
  <p><strong>What we want</strong> is for the visible list to read like this: "Text" "Apple" "Banana" etc.</p>