Angular Modal with Dynamic Content that has Custom Directives - angularjs

Question

I am trying to display a dynamic form which contains custom directives as a modal. I have tried to use ng-bind-html but the html content that has custom directive shows up empty and throws error "The sanitizer was unable to parse the following block of html:"
Here is the running demo. Please advise.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngSanitize']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.textvalue = "";
$scope.cbvalue = "";
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.textvalue;
$scope.ddvalue;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
angular.module('ui.bootstrap.demo').directive('customTextinput', function(){
return {
restrict: "EA",
scope: {
label: "=",
fieldvalue: "="
},
templateUrl: "customti.html",
controller: function($scope, $log){
}
}
})
angular.module('ui.bootstrap.demo').directive('customDropdown', function(){
return {
restrict: "EA",
scope: {
label: "="
},
templateUrl: "customcb.html",
controller: function($scope, $modal, $sce){
$scope.showModal = function(){
var modalInstance = $modal.open({
animation:true,
templateUrl: 'modaldemo.html',
backdrop: 'static',
controller: function($scope, $log, $modalInstance){
$scope.myContent = '<custom-textinput label="\'Text Input\'" ng-model="textvalue"';
//$scope.myContent = "<p>Hello World</p>";
$scope.ok = function () {
$modalInstance.close('');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
})
}
}
}
})

Answer 1

You need module called ngSanitize take a look on angular docs here
https://docs.angularjs.org/api/ngSanitize
After installing this .You can use $sce service like this
var cleanHtml = $sce.trustAsHtml(html);
It will solve sanitizer errors.Also do not forget to inject it into direcitve.