How to add typeahead directive dynamically?

Question

Angular

Good afternoon.
I need to dynamically add the directive https://angular-ui.github.io/bootstrap/#/typeahead inside my directive by some condition.
To do this, I use $compile and a line with the 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 the typeahead doesn't work properly. When entering characters, the search occurs and even there are some results, but they do not fall out as they should normally in the form of a dropdown list. Navigating through the hidden list also happens (up/down)
If the same directive is used as usual, then it works without problems - dropdown appears.
Demo: plnkr
There are two options in Demo:
1. The typeahead directive is dynamically added via the red button, which does not work.
2. there is already a typeahead in the page code that works.
The widget is convenient and I would not want to change it to something else. I tried ui-select but it doesn't work the way I want it to.
What are the solutions?