Render a directive from a dynamic text - angularjs

Question

I'm trying to use a custom directive loaded from a dynamic text, 'till now I've created the directive and if I use this directive in the HTML file works, but what I want to do is use this directive in a model (string).
This is a sample
https://jsfiddle.net/4Lg42e9d/2/
<div ng-app="test">
<div class="holder" ng-controller="MainController">
<div class="question">
<label ng-bind-html="saveHtml">{{saveHtml}}</label><br>
<input type="text" ng-model="current.answer">
</div>
<button ng-click="goNextQuestion()">Next</button>
<hr>
<answer></answer>
<br>
<br>
<div>{{config}}</div>
</div>
</div>
js file:
'use strict';
var app = angular.module('test', ['ngSanitize']);
app.controller('MainController', function($scope, $sce){
var index = 0;
$scope.config = [
{
"id": "uniqueIdOne",
"question": "What is your name?",
"answer" : ""
},
{
"id": "uniqueIdTwo",
"question": "Great <answer></answer>, <strong>this is some random text</strong>.",
"answer": ""
}
];
$scope.goNextQuestion = function(){
$scope.current = $scope.config[++index];
$scope.trustHtml();
}
$scope.trustHtml = function(){
$scope.saveHtml = $sce.trustAsHtml( $scope.config[index].question );
}
$scope.current = $scope.config[0];
$scope.trustHtml();
});
app.directive('answer', function() {
return {
template: 'This is rendered by the directive answer.',
};
});
I can load the text with the directive, but do not render the content.
The question is: How can i trigger the directive render?
Thanks in advance!

Answer 1

You should create a directive to compile the text with the directive inside.
Using $compile service so you can trigger the directive render, like:
JS
app.directive('myDirective',[ '$compile', function($compile){
return {
restrict: 'A',
link: function($scope, iEle, attrs){
var compiledTpl;
function destroyData() {
if (compiledTpl) {
compiledTpl.remove();
compiledTpl = null;
}
if ($scope.$newScope) {
$scope.$newScope.$destroy();
$scope.$newScope = null;
}
}
$scope.$watch(attrs.myDirective, function (tpl) {
destroyData();
if (tpl) {
tpl = '<div>' + tpl + '</div>';//make sure tpl is a html template.
$scope.$newScope = $scope.$new();
compiledTpl = $compile(tpl)($scope.$newScope);// compile the directive in string (trigger the directive render).
iEle.append(compiledTpl);
} else {
iEle.html('');
}
});
$scope.$on('$destroy', destroyData);//avoid memory leak.
}
};
}]);
HTML
<div my-directive="config[1].question"></div>
Link demo: https://jsfiddle.net/kw04qrdb/