Popover close button doesn't work (on SVG element) - angularjs

Question

Short
The question basically is why doesn't this fiddle not working properly. The close button on the popover works only once.
Long
I am creating a set of SVG elements that is dynamically added (through angular directives) to the page, and want them to have Popovers with close buttons. My current approach is not only not working, but seems too messy. I am looking for a better solution.
HTML
<div id="test-popover">Click on the rectangle for the popover.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:200px;">
</svg>
</div>
Javascript
var $element = $(document.createElementNS("http://www.w3.org/2000/svg", 'rect'))
.attr({ x: 42, y: 50, width: 50, height:75, fill: "#0011ff", })
var $closebtn = $('<button type="button" class="close" aria-hidden="true">&times</button>')
.on('click', (function ($element) {
return function () {
console.log("close...");
$element.popover('hide');
}
})($element));
var $poptitle = $('<div>Title</div>').append($closebtn);
var popcontent = function () {
return "some content with <b>HTML</b>";
};
$element.popover({
html: true,
title: $poptitle,
content: popcontent,
container: 'body',
});
$('#test-popover svg').append($element);
fiddle: http://jsfiddle.net/k9vva
Does anyone have a better way of doing this?

Answer 1

I suspect is because the popover is changing the html and the event handler is getting removed or something. One way could be to include the hidepopup call within the html thats appended. There's a fiddle here http://jsfiddle.net/k9vva/1/ (there may be a better solution that doesn't use the main scope, but it may depend on how you are integrating it).
var $element = $(document.createElementNS("http://www.w3.org/2000/svg", 'rect')).attr(
{ x: 42, y: 50, width: 50, height:75, fill: "#0011ff", });
var $closebtn = $('<button type="button" class="close" aria-hidden="true" onclick="hidepop();">&times</button>');
var $poptitle = $('<div>Title</div>').append($closebtn);
var popcontent = function () {
return "some content with <b>HTML</b>";
};
$('#test-popover svg').append($element);
$element.popover({
html: true,
title: $poptitle,
content: popcontent,
container: 'body',
});
window.hidepop = function() {
$element.popover( 'hide' );
};

Answer 2

I actually fixed it by calling title as a function with closure.
var $poptitle = (function($closebtn){
return function(){
return $('<div>Title</div>').append($closebtn);
}
})($closebtn);
Thought i'd add it here in case anyone wondered. This solution seems a little weird though, but oh well...
(I actually added the creation of the $closebtn and the $popover under one closure, in case this gives anyone problems).