I need to display a clickable table inside a popover, and trigger a function when a row is clicked. My HTML code appears as follows:
<a popover id="showDays"
type="button"
class="btn btn-success btn-xs pull-left"
data-toggle="popover"
data-placement="right"
data-html="true"
title="Popover title"
data-content=
'<table class="table table-condensed">
<tbody>
<tr ng-repeat="d in days" ng-click="show(111)">
<td ng-bind="d"></td>
<td ng-bind="x"></td>
</tr>
</tbody>
</table>'>
<i class="fa fa-clock-o fa-lg">Click me</i>
</a>
Here's my script.js: var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.days = [
'Sunday',
'Monday',
];
$scope.show = function(x) {
console.log("show called with " + x);
$scope.x = x;
}
}).directive('popover', function($compile, $timeout){
return {
restrict: 'A',
link:function(scope, el, attrs){
var content = attrs.content;
var elm = angular.element('<div />');
elm.append(attrs.content);
$compile(elm)(scope);
$timeout(function() {
el.removeAttr('popover').attr('data-content',elm.html());
el.popover();
});
}
}
});
The original code was taken from this forum thread, where the solution seems to be working fine. However, I'm facing an issue where my show function does not get executed. Any thoughts on why this might be happening?