title: Foreign Key for select drop down
body: <p>So I have data Foo that has a field for bar_ID.</p>
  
  <p>I'm looking at <a href="https://docs.angularjs.org/api/ng/directive/select" rel="nofollow">https://docs.angularjs.org/api/ng/directive/select</a> and I'm not sure how to populate/preselect an option by value and set the model by the value in the select.</p>
  
  <p>HTML:</p>
  
  <pre><code>Bar:&lt;select ng-model="foo.bar_ID" data-ng-options="bar.name for bar in bars track by bar.ID"&gt;&lt;/select&gt;
  foo.bar_ID: {{foo.bar_ID}}
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.foo = { bar_ID: 2 };
  $scope.bars = [
      {
          ID: 1,
          name: "the first"
      },
      {
          ID: 2,
          name: "the second"
      },
      {
          ID: 3,
          name: "the third"
      }];
  </code></pre>
  
  <p>I was expecting :</p>
  
  <ul>
  <li>to see "the second" selected by default, <strong>but instead</strong> it's <code>?</code></li>
  <li>that I select something, like "the first", <code>foo.bar_ID</code> would become <code>2</code>, <strong>but instead</strong> it's actually becoming the object associated with the second bar.</li>
  </ul>
  
  <p>Even though the HTML is actually becoming what I expected:</p>
  
  <pre><code>&lt;option value="1"&gt;the first&lt;/option&gt;
  </code></pre>
  
  <p>See: <a href="http://jsfiddle.net/s75hjao2/" rel="nofollow">JSFiddle</a></p>