AnglularJS - ngOptions selected option with string value for the model, but objects as options
<p>Been trawling for hours now trying to understand how this is meant to work.</p>

<p>But effectively I've got </p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;?php $field = 'member_address_country'; ?&gt;
    &lt;label for="&lt;?=$field?&gt;"&gt;Country&lt;/label&gt;
    &lt;select class="form-control" id="&lt;?=$field?&gt;" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.&lt;?=$field?&gt;"&gt;
        &lt;option value="" disabled="disabled" selected="selected"&gt;-- Select --&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>I've got an array of countries, stored inside <code>$scope.countries</code> as objects looking similar to </p>

<pre><code>[
    {country_id: "1", country_name: "england"},
    {country_id: "2", country_name: "america"},
    {country_id: "3", country_name: "other"},
]
</code></pre>

<p>I've got an array of addresses which are in a ngRepeat labeled as <code>a</code> so <code>a.member_address_country</code> is a string, which will contain an int id. in this example its <code>"2"</code></p>

<p>So although im using ngOptions and <code>track by country.country_id</code> and the value of the model is the id from <code>country_id</code> as expected, when the ngRepeat is rendered it just displays <code>-- Select --</code> rather than picking the object from the array, based off the tracked id.</p>

<p>What am I doing wrong, and how can I fix this?</p>

<p>I've added a codepen of the issue -> <a href="http://codepen.io/owenmelbz/pen/XdxrMO?editors=1010" rel="nofollow">http://codepen.io/owenmelbz/pen/XdxrMO?editors=1010</a></p>

<p>and another example here -></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
  .controller('testController', function($scope) {

    $scope.a = {
      member_address_country: 100
    }

    $scope.countries = [{
      country_id: 100,
      country_name: "england"
    }, {
      country_id: 200,
      country_name: "uk"
    }, {
      country_id: 300,
      country_name: "london"
    }]

  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"&gt;&lt;/script&gt;

&lt;div class="form-group" ng-app="app" ng-controller="testController"&gt;
  &lt;label for="member_address_country"&gt;Country&lt;/label&gt;
  &lt;select class="form-control" id="member_address_country" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.member_address_country"&gt;
  &lt;/select&gt;model value is: {{a.member_address_country | json}}
&lt;/div&gt;</code></pre>
</div>
</div>
</p>