Render a custom directive when loaded dynamically from controller - angularjs

Question

I have three custom directive, say <sample-grid></sample-grid> , <sample-form></sample-form> and <sample-view></sample-view>. These are defined in the following way:
angular.module("MyApp").directive('sampleGrid', [ function() {
return {
scope : {},
restrict: 'EA',
templateUrl : 'view/templates/sample-grid.tmpl.html',
controller : 'SampleGridCtrl',
scope: {
scnid: '=',
}
};
} ]);
I have a main view where I am using <md-tabs> from angular material in following way -
<md-tabs>
<md-tab ng-repeat="tab in myCtrl.pageTabs track by $index">
<md-tab-label>{{tab.tabName}}</md-tab-label>
<md-tab-body>
<div id="tab.tabName" ng-bind-html="tab.tabHTML"></div>
</md-tab-body>
</md-tab>
</md-tabs>
also the controller for this view defined as
angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
var homeScope = this;
homeScope.pageTabs = [];
var newTab = {};
newTab.tabName = "Sample";
newTab.tabHTML = $sce.trustAsHtml("<sample-grid></sample-grid>");
newTab.tabAction = "grid";
homeScope.pageTabs.push(newTab);
var template = angular.element(document.querySelector('#Sample'));
$compile(template)(homeScope);
}])
The requirement is: user will be able to add new tabs in view, and I have to show one of the three custom directives in the view based on the selection. So I have to just push new tab objects into homeScope.pageTabs with the required property.
The problem is : After pushing the tab object, new tab is created but the custom directive does not render into view. I can see it in the console like :
<div id="tab.tabName" ng-bind-html="tab.tabHTML">
<sample-grid></sample-grid>
</div>
I have seen answers here such that I have to use $compile to render it correctly. I tried that, But I could not get the proper solution.
So my question is how I can achieve this functionality? And, is there any other easy and possible way to achieve this?

Answer 1

I have changed your controller logic a little bit. You have to use compile a little bit different.
angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
var homeScope = this;
homeScope.pageTabs = [];
var template = $sce.trustAsHtml("<sample-grid></sample-grid>");
var linkFn = $compile(template);
var content = linkFn(scope);
var newTab = {};
newTab.tabName = "Sample";
newTab.tabHTML = content;
newTab.tabAction = "grid";
homeScope.pageTabs.push(newTab);
}])