I am trying to compile an element on click with a new variable, but after the first click, the variable appears in curly brackets {{variable}}. You can see it in action here
var app = angular.module("myApp",[]);
app.directive('tester',function($compile){
return{
restrict:'E',
templateUrl:'fruits.html',
replace:true,
link: function(scope,elem,attrs){
elem.bind("click", function(e){
scope.fruit = 'apple';
var template = "<p>{{fruit}}</p>";
elem.append(template);
$compile(elem.contents())(scope);
});
}
}
});