title: ngModel overriding ngSelected on select>option element
body: <p>I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model <strong>(signup.user["country_code"])</strong> to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.</p>
  
  <pre><code>        &lt;select ng-model='signup.user["country_code"]'&gt;
          &lt;option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'&gt;
              {{country["name"]}}
          &lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.</p>
  
  <pre><code>        &lt;select&gt;
          &lt;option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'&gt;
              {{country["name"]}}
          &lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>Here is a snippet from my controller however I doubt it's that useful for solving this issue.</p>
  
  <pre><code>   signup.user = {};
  
     countryCodes.success(function(data) { 
       signup.country = data;
     });
  </code></pre>