Passing non-string attributes to a $compile function - dom

Question

I made an html-renderer directive which accepts a string and turns it into html elements:
.directive('htmlRenderer', function($compile) {
var linker = function(scope, element, attrs) {
scope.$watch('template', function() {
element.html(scope.template);
$compile(element.contents())(scope);
console.log("Template", scope.template);
});
};
return {
restrict: 'E',
replace: true,
link: linker,
scope: {
template: '#'
}
};
});
My problem is that I get a 'DOM Exception 5' when passing objects as attributes:
<html-rendered template='<foo x-data={{ neededData }}/>'/>
And in my controller I have:
function Controller($scope) {
$scope.neededData = { text: 'Foo needs this for something' };
}
Here's a fiddle of it: http://jsfiddle.net/9U7CJ/2/
I've come across this question: Getting INVALID_CHARACTER_ERR: DOM Exception 5
which pretty much means I'm doing something wrong. And sadly, I don't know much about DOM soo I'm pretty much stuck.
I've read and re-read the Angular Docs for $compile and about the link/compile functions but it didn't get any clearer for me. Thanks in advance! :)