load and compile angular directive on demand
<p>I'm recently stated learning angular js..Please help me out..
I'm trying to load and compile angular directive on demand(onclick)..I'm able to load the directive file(mydiv.js) but the mydiv.js file is not compiling..
Here is my code..</p>

<pre><code>index.html

&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="angular.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div ng-app="app"&gt;
&lt;button type="button" onclick="disply_directive()"&gt;Click&lt;/button&gt;
&lt;my-directive ng-init="init()"&gt;&lt;/my-directive&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

app.js

var app = angular.module('app', []);

var disply_directive = function () {
 load_scripts('mydiv.js');
}

var load_scripts = function(url) {
if (url) {
var script = document.querySelector("script[src*='"+url+"']");
if (!script) {
var heads = document.getElementsByTagName("head");
if (heads &amp;&amp; heads.length) {
var head = heads[0];
if (head) {
script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', 'text/javascript');
head.appendChild(script);
}}}
return script;
}};

mydiv.js

app.directive('myDirective', function ($http) {
return {
template: '&lt;h1&gt;Hello World!&lt;/h1&gt;',
strict: 'E',
link: function(scope) {
},
controller: function($scope) { 
$scope.init = function() {
alert("Hello World!");
console.log("Hello World!");
};
}
};
});
</code></pre>

<p>Here i'm not adding the mydiv.js src in index.html..
Now onclick of the button it loads the js file but not displaying..Where i need to modify my code..
Thank you..</p>