Precompile the components loaded from another file

I have created a set of components and i am loading it on clicking the button. But i can't precompile and render the components when it is from another file.

Application

<span >
DEFAULT
</span>

The above is the application page im having and on clicking the link,it will navigate to appropriate route. The span will load the component template on clicking.

ApplicationController

actions: {
 loadScript: function(){
   $("body").append("<script type='text/x-handlebars' data-template-name='default'></script>")  
 }
}

It is working fine when i have the script in the same file where the link is available. But not working when appended from another file.

I need to render the component in after the click where the script is appended to the body.

Thanks in advance