I am trying to add a template dynamically in my an angular directive. I have used link function to compile the variable into an html element as given in this [answer](https://stackoverflow.com/questions/23329011/how-to-use-a-directive-to-dynamically-change-a-template).

But I am not able to make it work.

This is my html:

```
<spinners></spinners>

```

This is my directive:

```
app.directive('spinners', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var spinkit = ["<rotating-plane-spinner></rotating-plane-spinner>", "<double-bounce-spinner></double-bounce-spinner>", "<wave-spinner></wave-spinner>", "<wandering-cubes-spinner></wandering-cubes-spinner>", "<pulse-spinner></pulse-spinner>", "<chasing-dots-spinner></chasing-dots-spinner>", "<circle-spinner></circle-spinner>", "<three-bounce-spinner></three-bounce-spinner>", "<cube-grid-spinner></cube-grid-spinner>", "<word-press-spinner></word-press-spinner>", "<fading-circle-spinner></fading-circle-spinner>"];
            var spinner = spinkit[Math.floor(Math.random() * spinkit.length)];
            var el = angular.element(spinner);
            compile(el.contents())(scope);
            element.replaceWith(el);
        }
    };
});

```

Actually I am making use of [Angular-SpinKit](https://github.com/Urigo/angular-spinkit) to display the spinners randomly in my loading page. When I use a single directive of spinkit directly, it works. But when I use the above method, I could not find anything in my html page.