javascript - Angularjs - $compile element on click variable is not compiled -

i compile element oc click new variable after first click variable shows in curly brackets {{variable}} -> see plnkr

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);       });      }   } }); 

all need is:

 elem.append(template);  $compile(elem.contents())(scope); 

as of compiling first , appending. swap lines , it'll work.