Невозможно получить typeahead-on-select, работающий с Угловым UT Bootstrap

Question

См. Plunker: http://plnkr.co/edit/hsxYC2KPsf7S3non34Cy.

HTML:

<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)" typeahead-on-select="onSelect($item)"> 

JavaScript:

$scope.cities = function(cityName) { 
    $scope.city = cityName.split(" "); 
     // $timeout emulates an async call to a server. 
     return $timeout(function() { 
      switch ($scope.city[0]) { 
       case 'N': 
        return {cand: ["New"]}; 
       case 'New': 
        return {cand: ["New Albany", "New York"]}; 
       default: 
        return {cand: ["<no match>"]}; 
      } 
     }, 1000).then(function(res) { 
      return res.cand; 
     }); 
    }; 

    $scope.onSelect = function($item) { 
     $scope.cities($item); 
    }; 

Give 'N' в качестве входных данных, подождите 1 сек. Появится список типа head, выберите «New» (Состояние A). Список исчезает, новых предложений нет. Нажмите пробел, пока нет списка типов.

Демонстрация необходимого поведения: укажите «Новый» в качестве входного сигнала. Список typeahead появляется с «New Albany» и «New York» для выбора. Я хочу видеть тот же список в State A.

В режиме type-head-on-select с истинным сервером я могу получить сервер для отправки нового списка («New Albany» и «New York») но проблема в том, что угловой просто не отображает список.

Answer 1

После некоторых пустячный, похоже, что вам нужно установить в $ viewValue явно и пусть Угловая делают это для вас, как это обычно бывает так:

$scope.onSelect = function($item) { 
    var theInput = angular.element(document.querySelector('#theInput')); 
    var ngModelCtrl = theInput.controller('ngModel'); 

    ngModelCtrl.$setViewValue($item); 
    ngModelCtrl.$render(); 
}; 

Этот код, вероятно, можно было бы улучшить совсем немного - в настоящее время у меня возникают проблемы с отображением выпадающего списка на STOP. Но он делает то, что вы хотите.

Plunkr here.