I have made some adjustments to the popover directive in order to include files and $compile them. While I've managed to make ng-repeats function properly, I'm facing issues when trying to add a typeahead feature.
angular.module("app").directive("boundPopover", ['$compile', '$http', function($compile, $http) {
return {
restrict: 'A',
link: function(scope, element, attr, ctrl) {
var content = attr["popoverContent"];
var title = attr["popoverTitle"];
function initPopup() {
element.popover({
html: true,
content: $compile(content)(scope),
title: $compile(title)(scope),
placement: attr["popoverPlacement"]
});
};
if(attr["popoverContentInclude"] || attr["popoverTitleInclude"]) {
var contentLoaded = false;
var titleLoaded = false;
if(!attr["popoverContentInclude"]) {
contentLoaded = true;
}
if(!attr["popoverTitleInclude"]) {
titleLoaded = true;
}
if(!contentLoaded) {
$http.get(attr["popoverContentInclude"]).success(function(d) {
content = d;
contentLoaded = true;
if(titleLoaded) {
initPopup();
}
});
}
if(!titleLoaded) {
$http.get(attr["popoverTitleInclude"]).success(function(d) {
title = d;
titleLoaded = true;
if(contentLoaded) {
initPopup();
}
});
}
}
else
{
initPopup();
}
}
}
}]);
The included title file looks like this-
<span class="glyphicon glyphicon-search"></span><input class='devices-search' ng-controller="DeviceCtrl" typeahead="state for state in states | filter:$viewValue | limitTo:10" ng-model="state"/>
It functions correctly when placed directly on the page or within an ng-include, but it is not working in this specific situation. Any suggestions on what steps I can take?