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?