Q:

How to recompile a directive upon inserting into DOM (angularjs)

Okay, so I've created a directive let's say 
<calendar></calendar>

It gets rendered as I expected so everything works fine. Now, my question is how to (re)render it when inserted into DOM? I don't want to use it on my page all the time, I just want to dynamically add it and render just when I need it to (it's a part of a module), let's say, ideally I want it to appear like 
$("body").append("<calendar></calendar>")

How can I achieve this with angularjs?

A:

You need to write below two lines wherever you want to inject your directive element to DOM, don't forget to add $document & $compile dependency wherever you use it.
var template = '<calender></calender>',
    body = $document.find('body');
body.append($compile(template)(scope));

