I am facing an issue with a twitter bootstrap popover that I populate dynamically with HTML content. In the HTML, there is an unordered list containing li elements with ng-click attributes targeting methods in my controller...
Strangely, the ng-click event on the li elements does not trigger. However, there is a button that appears when the page loads with an ng-click attribute that works perfectly fine. It seems like the dynamic HTML cannot access the $scope variable. Does anyone have any ideas on how to fix this?
var popoverContent = '<ul class="list-unstyled">'
cities.forEach(function(city, index){
popoverContent = popoverContent + '<li class="town-listing" ng-click="selectAutocompleteCity('+ city.name +')"><span class="city-name">' + city.name + '</span></li>';
});
popoverContent = popoverContent + '</ul>';
$('#town-search-field').popover({
animation: true,
html: true,
content: '<div id="city-popover-inner" style="min-height:100px;width:250px;"></div>',
placement: 'bottom',
trigger: 'manual',
});