title: angular- ui-select - how to bind object property to ng-model
body: <p>i'm using the angular-ui-select in a simple user registration form:</p>
  
  <pre><code>&lt;ui-select ng-model="user.countryCode" convert-to-string theme="selectize" class="dropdown"&gt;
      &lt;ui-select-match placeholder="{{::strings('userDetails.countryPlaceholder')}}"&gt;{{$select.selected.name}}
      &lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="country in countries"&gt;
          &lt;span ng-bind-html="country.name | highlight: $select.search"&gt;&lt;/span&gt;
      &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  </code></pre>
  
  <p>Here's my countries array definition:</p>
  
  <pre><code>$scope.countries = [
              {name: 'Afghanistan', code: 'AF'},
              {name: 'Albania', code: 'AL'},
              {name: 'Australia', code: 'AU'},
              {name: 'Austria', code: 'AT'},
              {name: 'Azerbaijan', code: 'AZ'},
              {name: 'Belarus', code: 'BY'},
              {name: 'Belgium', code: 'BE'},
              {name: 'Belize', code: 'BZ'},
              {name: 'Benin', code: 'BJ'}
  ];
  </code></pre>
  
  <p>I'm creating the user object in my html, every field had an ng-model binded to some property of the user. When i'm using simple input such as firstName then it's easy:</p>
  
  <pre><code>&lt;input class="form-control" type="text" name="firstName" ng-model="user.firstName"/&gt;
  </code></pre>
  
  <p>But with the dropdown - 
  I want the country name to be displayed in the dropdown list options and the its code to be placed in the user object.
  I want to avoid writing code in the controller for this. (i.e. $scope.user.countryCode = $scope.country.selected.code; )</p>