Как добавить директиву typeahead динамически?

Question

[Sergi0Limit]

Добрый день.
Мне нужно добавить динамически директиву https://angular-ui.github.io/bootstrap/#/typeahead внутри своей директивы по какому-то условию.
Для этого я использую $compile и строку с директивой

<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control" typeahead-show-hint="true">

var a = angular.element(document).find('asd');
    a.append($compile('<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control" typeahead-show-hint="true">')($scope));

поле ввода добавляется, но typeahead работает неполноценно. При вводе символов поиск происходит и даже есть какие-то результаты, но они не выпадают как обычно должны в виде dropdown списка. Навигация по скрытому списку также происходит (вверх/вниз)

Если эту же директиву использовать как обычно то и работает без проблем - dropdown появляется.

Demo: plnkr
В Demo два варианта:
1. через красную кнопку динамически добавляется директива typeahead, который не работает.
2. в коде страницы уже есть typeahead, который работает.

Виджет удобный и не хотелось бы менять его на что-то еще. Пробовал ui-select но он работате немного не так как мне нужно.
Какие есть варианты решения?