title: Setting the selected item in angularJS select directive
body: <p>I have a problem with setting the selected item in angular's select directive. I don't know if this is a bug or a conscious design from the designers of angular. It sure makes the select directive a lot less useful though.</p>
  
  <p>Description:</p>
  
  <p>My app communicates with a REST API to receive an entity from the database. The API dictates that relations of the object are sent with an ID property only so that you can retrieve them in subsequent requests if needed. </p>
  
  <p>Example:</p>
  
  <pre><code>{ id : 1, customerName : "some name", city : {id : 12}} 
  </code></pre>
  
  <p>where city is another entity that can be retrieved through a different REST endpoint using the city id and looks like so:</p>
  
  <pre><code>{ id: 12, name : "New York"}
  </code></pre>
  
  <p>I need to create a form to edit the customer entity with a dropdown menu with all possible cities so that the user can select the appopriate city from the list. The list must initially display the customer's city as retrieved from the JSON object. </p>
  
  <p>The form looks like this: </p>
  
  <pre><code> &lt;form&gt;
    &lt;input type="text" ng-model="customer.name"/&gt;
    &lt;select ng-model="customer.city" ng-options="i as i.name for i in cities"&gt;&lt;/select&gt;
   &lt;/form&gt; 
  </code></pre>
  
  <p>And the controller looks like this:</p>
  
  <pre><code>app.controller('MainCtrl', function ($scope, $http) {
      $http.get(serviceurl + 'admin/rest/customer/' + id + "/", {
          params: {"accept": "json"},
          withCredentials: true
      }).then(function (response) {
                  $scope.customer = response.data.item;
              });
      $http.get(serviceurl + 'admin/rest/city/', {
          params: {"accept": "json"},
          withCredentials: true
      }).then(function (response) {
                  $scope.cities = response.data.items;
                  // THIS LINE LOADS THE ACTUAL DATA FROM JSON
                  $scope.customer.city = $scope.findCity($scope.customer.city);
              });
      $scope.findCity = function (city) {
          for (var i = 0; i &lt; $scope.cities.length; i++) {
              if ($scope.cities[i].id == city.id) {
                  return $scope.cities[i];
              }
          }
      }
  });
  </code></pre>
  
  <p>What should happen: 
  once the full details of the City object are loaded the select directive must set the city that was loaded as the selected item in the list. </p>
  
  <p>What happens: 
  the list displays an empty item and there's no way to initialize the selected item if the selected item from objects outside the array of items. </p>
  
  <p>DEMO of the issue here: <a href="http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview" rel="noreferrer">http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview</a></p>
  
  <p>Is there a solutions for this? Can the selected item be set programmatically in a generic way so that the AJAX calls and select logic be refactored into a reusable AJAX based select widget ?</p>