title: AngularJs - ng-model in a SELECT
body: <p><a href="http://jsfiddle.net/wwno55hj/">JSfiddle</a></p>
  
  <p><strong>Problem:</strong></p>
  
  <p>I have a SELECT-element in my page, which is filled in with an <code>ng-repeat</code>. It also has a <code>ng-model</code> which has a default value.</p>
  
  <p>When I change the value, the <code>ng-model</code> adapts, that's ok. But the dropdown-list shows an empty slot at launch, where it should have the item with the default value selected instead.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;div ng-app ng-controller="myCtrl"&gt;
      &lt;select class="form-control" ng-change="unitChanged()" ng-model="data.unit"&gt;
           &lt;option ng-repeat="item in units" ng-value="item.id"&gt;{{item.label}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With JS:</p>
  
  <pre><code>function myCtrl ($scope) {
      $scope.units = [
          {'id': 10, 'label': 'test1'},
          {'id': 27, 'label': 'test2'},
          {'id': 39, 'label': 'test3'},
      ]
  
          $scope.data = {
          'id': 1,
          'unit': 27
          }
  
  };
  </code></pre>