Ошибка: Нет контроллера: ngМодель для углового Typeahead

Question

У меня есть сочетание JQuery и угловатое, и я пытаюсь отобразить диалог с Typeahead внутри. По объективным причинам я показываю модальное тело и прилагаю его с помощью директивы Angular typeAhead.

$('.modal-builder .modal-body').append('<input type="text" placeholder="Start typing product title" typeahead="item.title for item in getAutoCompleteProducts($viewValue)" typeahead-loading="loadingLocations" class="form-control input inline" typeahead-wait-ms="200" typeahead-min-length="0" typeahead-on-select="insertProduct($item)" /><i class="fa fa-spinner fa-spin fa-lg" ng-show="loadingLocations" > </i>'); 

после этого я пытаюсь скомпилировать его:

var cr = $('.modal-builder .modal-body').append('<div class="row"></div>'); 
$compile(cr)(scope); 

Но я получаю эту ошибку:

Error: No controller: ngModel 

Область также из директивы диалога Угловая Bootstrap. Внутри я имею различные кнопки для отображения диалога с TypeAhead.

Я прочитал другие вопросы по стеку и выглядит как ошибка между областями директив. Я не мог решить это, выполнив отдельные области.

Должен ли он быть скомпилирован в совершенно новой области?

Answer 1

Добавить директиву ngModel в шаблон машинописного:

<input type="text" 
     ng-model="product.selected" 
     placeholder="Start typing product title" 
     typeahead="item.title for item in getAutoCompleteProducts($viewValue)" 
     ... 

Но такое сочетание JQuery с угловым не очень хорошей идеей.