angularjs ng-click not working inside the pop over directive - angularjs

Question

I added some buttons in the pop over template.
When the page finishes loading the first time, clicking on the element on the page shows the popover, and when clicking on the buttons in the popover, every one works fine. But after hiding and showing the popover again, the buttons do not work any more.
I know that the pop over recreates the DOM node every time it is shown/hidden. So I added $compile(content)(scope), but it only works the first time.
Here is my directive:
app.directive "popOverWidthOffset", ($templateCache, $compile)->
getTemplate = ()->
template = $templateCache.get('angular/templates/popOverCustomisationChangeWidthOffset.html')
restrict: 'A'
replace: true
scope: {
argument: '='
addwidth: '&'
decreasewidth: '&'
addoffset: '&'
decreaseoffset: '&'
}
link: (scope, element, attrs)->
content = getTemplate()
console.log(content)
popOverContent = $compile(content)(scope)
options = {
content: popOverContent,
placement: "top",
html: true,
trigger: "click"
}
$(element).popover(options)
Here is the template:
<table>
<tbody>
<tr>
<td>
<a class="btn btn-link" ng-click="addwidth(argument)">
<span class="glyphicon glyphicon-chevron-up">
</a>
</td>
<td> </td>
<td>
<a class="btn btn-link">
<span class="glyphicon glyphicon-chevron-up" ng-click="addoffset(argument)">
</a>
</td>
</tr>
<tr>
<td class="form-group" width="40px;">
<input class="form-control" ng-model="argument.position[1]" style="text-align: center;">
</td>
<td> </td>
<td class="form-group" width="40px;">
<input class="form-control" ng-model="argument.position[2]" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<a class="btn btn-link" ng-click="decreasewidth(argument)">
<span class="glyphicon glyphicon-chevron-down">
</a>
</td>
<td> </td>
<td>
<a class="btn btn-link">
<span class="glyphicon glyphicon-chevron-down" ng-click="decreaseoffset(argument)">
</a>
</td>
</tr>
</tbody>
</table>

Answer 1

DEMO
(function(angular, $) {
'use strict';
PopoverCtrl.$inject = ['$scope', '$window'];
function PopoverCtrl($scope, $window) {
$scope.foo = 'scope foo';
$scope.bar = function() {
$window.alert('bar called');
};
}
PopoverDirective.$inject = ['$templateCache', '$compile'];
function PopoverDirective($templateCache, $compile) {
return {
controller: 'PopoverCtrl',
link: popoverLinkFn
};
function popoverLinkFn(scope, elem) {
/**
* Initialise popover
*/
function initPopover() {
// Read content
var content = $($templateCache.get('/popover.html'));
// Compile it
$compile(content)(scope);
// Popover options
var options = {
html: true,
content: content
};
elem.popover(options);
}
// Call init
initPopover();
// Cleanup on scope destroy
scope.$on('$destroy', function() {
elem.popover('destroy');
});
}
}
angular.module('app', [])
.controller('PopoverCtrl', PopoverCtrl)
.directive('popover', PopoverDirective);
})(window.angular, window.angular.element);