How to add the typeahead Directive dynamically?

Good afternoon.
I need to dynamically add a Directive https://angular-ui.github.io/bootstrap/#/typeahead inside your Directive on some condition.
For this I use $compile, and the string Directive
<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));


the input field is added, but typeahead works defective. When entering characters, search is happening and even have some results, but they don't fall out as you normally have in a dropdown list. Navigating the hidden list also occurs (up/down)

If this Directive is use normally and works without problems - the dropdown appears.

Demo: plnkr
In Demo two options:
1. via the red button is dynamically added typeahead Directive, which does not work.
2. in the page code already has typeahead that works.

Widget is convenient and I would not like to change it to something else. Tried ui-select but it not worked so little as I need.
What are the solutions?
July 8th 19 at 15:30

Find more questions by tags AngularBootstrap