angular directive store rendered html in template cache

Question

BACKSTORY

I have a use case where I use an angular directive to build a fairly beefy form. The compiled directive will be used in multiple places, and rather than having to render the html multiple times, I would like to have the rendered template html and manually compile the html with the scope.

I approach this by manually compiling the directive on load:

$('body').append(preRenderedElement);
$compile(preRenderedElement)(templateScope);

This code then constructs mydirective properly and renders it to the page as desired. However, what I am ideally searching for is a way in which I can get either the HTML string or the DOM node without having to attach it to the DOM. I want to then be able to store the HTML string in template cache or convert the DOM node to an HTML string and then store it in the template cache.

Question

How do I obtain the rendered DOM node or HTML from the (manual) compile of a directive such that I can store it in template cache? Ideally, this will be done without ever having to attach the compiled HTML to the DOM.