Установка выбранного элемента в директиве select

У меня возникла проблема с установкой выбранного элемента в директиве angular select. Я не знаю, является ли это ошибкой или сознательным дизайном дизайнеров angular. Это, безусловно, делает директиву select намного менее полезной, хотя.

Описание:

Мое приложение связывается с REST API для получения сущности из базы данных. API диктует, что отношения объекта отправляются с идентификационным свойством только для того, чтобы вы могли получить их в последующих запросах, если это необходимо.

Пример:

{ id : 1, customerName : "some name", city : {id : 12}} 

где город - это другой объект, который может быть получен через другую конечную точку REST с использованием идентификатора города и выглядит так:

{ id: 12, name : "New York"}

Мне нужно создать форму для редактирования объекта клиента с выпадающим меню со всеми возможными городами, чтобы пользователь мог выбрать город-appopriate из списка. Список должен первоначально отображать город клиента, полученный из объекта JSON.

Форма выглядит следующим образом:

 <form>
  <input type="text" ng-model="customer.name"/>
  <select ng-model="customer.city" ng-options="i as i.name for i in cities"></select>
 </form> 

И контроллер выглядит следующим образом:

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 < $scope.cities.length; i++) {
            if ($scope.cities[i].id == city.id) {
                return $scope.cities[i];
            }
        }
    }
});

Что должно произойти: после загрузки полной информации о объекте City директива select должна установить город, который был загружен как выбранный элемент в списке.

Что происходит: в списке отображается пустой элемент, и нет возможности инициализировать выбранный элемент, если выбранный элемент из объектов вне массива элементов.

DEMO проблемы здесь: http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview

Есть ли для этого решения? Может ли выбранный элемент быть установлен программным способом общим образом, чтобы логические вызовы и выбор логики AJAX были реорганизованы в многократно используемый виджет выбора на основе AJAX?

Ответы

<select
    ng-model="item"
    ng-options="item.name for item in items track by item.name">

// all items
$scope.items = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
// set the active one
$scope.item = {name: 'b'};
// or just
$scope.item = $scope.items[1]

$scope.customer.city = _.find($scope.cities, function (city) {
    return city.id === theCustomersCity.id;
});

<select ng-model="customer.cityId" ng-options="i.id as i.name for i in cities"></select>

<select ng-model="customer.city" ng-options="i as i.name for i in cities"></select>

<select ng-model="customer_cityProxy" ng-options="i.name as i.name for i in cities"></select>