title: AngularJS select: remove empty option and use data objects not arrays
body: <p>I've been searching high and low for an explanation as to how to remove the empty option AngularJS always renders in selects.  I have found lots of information doing this when the options are derived from a JSON array placed directly in the code, but I can't find anything about removing this empty option when working with data objects.</p>
  
  <p>Say I have object "foo" in my database and "foo" has both a "name" and a "bar_id".</p>
  
  <p>Can someone toss me a clue about doing this with data objects?</p>
  
  <p>References:
  <a href="https://stackoverflow.com/questions/20738953/angular-js-remove-blank-option-from-select-option">Angular JS Remove Blank option from Select Option</a></p>
  
  <p><a href="http://jsfiddle.net/MTfRD/3/" rel="nofollow noreferrer">http://jsfiddle.net/MTfRD/3/</a> (This is someone else's fiddle from the SO question linked above; code is not mine but taken from that fiddle.)</p>
  
  <p>JS:</p>
  
  <pre><code>function MyCtrl($scope) {
      $scope.typeOptions = [
  
          { name: 'Feature', value: 'feature' }, 
          { name: 'Bug', value: 'bug' }, 
          { name: 'Enhancement', value: 'enhancement' }
      ];
  
      $scope.form = {type : $scope.typeOptions[0].value};
  }
  </code></pre>
  
  <p>I want to get foo.name and foo.bar_id. I want foo.name to be the option label and foo.bar_id to be the value (e.g. <code>&lt;option value="foo.bar_id"&gt;foo.name&lt;/option&gt;</code>. For each foo, foo.bar_id will then become an identifying parameter in the record to pull up and display "on change" (immediately upon selection of the option).</p>
  
  <p>I've tried everything I can think of to set this up and nothing seems to work. Worst of all it either fails silently, leaving me with no indication what I am doing wrong, or complains that foo is not an object, which frustrates me to no end.  (I assure you, "foo" IS being loaded by an AJAX request in the actual code I'm working on and works fine as an object everywhere else -- NDAs prohibit me from sharing actual code though, sorry.)</p>
  
  <p>Using the above example from the other thread, I understand I would assign something like <code>ng-model="typeOptions"</code> in the select tag within the template, but how would I get "typeOptions" to access foo and make foo.name the option label and foo.bar_id the option value? Also, default angular values for the options (the ones that look like a generated index) are fine with me, but I still need to call upon foo.bar_id to get the task done, so it has to be "in there somewhere". </p>
  
  <p>Any help would be appreciated; currently I'm stuck with the hackish ng-repeat in the option itself, which I understand is not best practice.. Also I'm still fairly new at Angular, and still find it somewhat confusing, so the simpler and more straightforward your answers, the better I will be able to use them successfully. Thanks!</p>