Loading custom directive dynamically by assigning it to controller scope
<p>I am trying to load my custom directive dynamically on click of a button. On click, I would make an AJAX call to get the directive html. Once i get a response, i compile that response and assign it to a controller scope variable. I was expecting that the corresponding template of the custom directive to display properly but that is not the case. Please help.</p>

<p>Below is a sample of code which has the same issue.</p>

<p>In my HTML file:</p>

<pre><code>&lt;body ng-app="sampleApp" ng-controller="DemoController as DemoCtrl"&gt;
 &lt;div ng-bind-html="test"&gt;
 &lt;md-button class="md-raised md-primary" ng-click="DemoCtrl.getDirective()"&gt;Click to get directive&lt;/md-button&gt;
&lt;/body&gt;
</code></pre>

<p>My module and corresponding controller / directive:</p>

<pre><code>angular.module('sampleApp',['ngMaterial'])

        .directive('test',function(){
            return {
                restrict: 'E',
                template: '&lt;B&gt;Hello World&lt;/B&gt;'
            };
        })

        .controller('DemoController', function($compile,$scope,$sce) {
            var vm = this;
            vm.getDirective = function(){
                //Here I make a service call to get the directive. In this case I get a response as &lt;test&gt;&lt;/test&gt;
                var directiveCode = $compile("&lt;test&gt;&lt;/test&gt;");
                var directiveHTML = directiveCode($scope);
                $scope.test = $sce.trustAsHtml(directiveHTML);
                $scope.$apply();
            }
        });
</code></pre>