UI Boostrap Директива typeahead не работает, если она помещена в директиву и загружена динамически

У меня есть директива, которая создает входной текстовый элемент и использует директиву ust bootstrap для присоединения функций typeahead к полю ввода.

Это поле ввода динамически добавляется к одному из полей формы в событии dom. Я должен сделать это, так как у меня нет доступа к редактированию/изменению html-страницы, сгенерированной сервером. т.е. - Динамически добавлять поле типа с использованием угловых и бутстраповных углов.

Я использую ui boostrap - v0.12.0, версия angularjs - v1.2.26 и jquery - v1.8.3

Проблема: директива не работает (или может быть неправильно скомпилирована или доступна для доступа) в IE 11, тогда как работает отлично в браузере Chrome без каких-либо проблем. Я могу видеть добавленные элементы в загрузке формы без ошибок или исключений на консоли, однако магии типа "голова".

вот то, что у меня есть -

// added required js references
// initialize angular app
        var typeAheadApp = angular.module("typeAheadApp", ['smart-table', 'ui.bootstrap']);

контроллер:

typeAheadApp.controller('TypeaheadCtrl', ['$scope', '$http', '$compile', function ($scope, $http, $compile) {
    $scope.getCategoriesSize = 1;
    $scope.categorylkp = getCategoryField().val();

    $scope.getCategories = function (val) {
        return $http({
            url: "/some/data/source/url",
            method: 'GET',
            headers: {
                "Accept": "application/json;odata=verbose"
            }
        }).then(function (response) {
            $scope.getCategoriesSize = response.data.d.results.length;
            return response.data.d.results.map(function (item) {
                return item.categoryName;
            });
        }, function (ex) {
            alert("ERROR!!");
        });
    };
    $scope.selectedCategory = function (item, model, label) {
        getCategoryField().val(label);
    };
    $scope.updateCategory = function (setVal) {        
        getCategoryField().val(setVal);
    };

}]);

директива:

typeAheadApp.directive('categoryLookup', ['$compile', function ($compile) { 
        return {
            restrict: 'A',                  
            link: function (scope, element, attrs) {                            
                    var typeAheadTemplate = angular.element('<div class="form-inline">' +            
                                              '<input id="categorylkpTxt" type="text" ng-model="categorylkp" ng-change="updateCategory(categorylkp)" typeahead="category for category in getCategories($viewValue)" typeahead-on-select="selectedCategory($item, $model, $label)" typeahead-min-length="3" typeahead-loading="loadingCategories" style="width: 345px;" autocomplete="off">'  +
                                            '</div>' +
                                            '<div ng-show="loadingCategories">' + 
                                              '<i class="icon-refresh"></i> Loading...' + 
                                            '</div>' +
                                            '<div ng-show="!getCategoriesSize">' + 
                                              '<i class="icon-remove"></i> No Results Found ' + 
                                            '</div>');
                    var compiled = $compile(angular.element('<div>').append(typeAheadTemplate).html())(scope);
                    element.append(compiled);                       
            }
        }
    }]); 

функция init:

function initTypeAhead(){   
    var typeAheadField = getCategoryField(); // some field on the form

    typeAheadField.parent().append('<div id="typeAheadEl"><div ng-controller="TypeaheadCtrl"><div id="category-lookup" class="custom-typeahead" category-lookup></div></div></div>');       

    // manual bootstrapping the angular
    angular.bootstrap($('#typeAheadEl'), ['typeAheadApp']);
}

 angular.element(document).ready(function() {               
    initTypeAhead();    
});

Любые советы или комментарии?

Заранее спасибо!