How to enhance ngSanitize whitelists? - angularjs

Question

I'm trying to append HTML content from the controller to the view. For this I know that we have to use ngSanitize. Everything is working fine, but it is stripping out the attributes of the HTML elements.
Here is my controller:
var modalVar = '<div class="modal fade" id="deleteModal'+ data.data.id +'" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">Alert</h4></div><div class="modal-body"><p>Are you sure to delete?</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-danger" ng-click="deleteFunc('+ data.data.id +')" data-dismiss="modal">Yes</button></div></div></div></div>';
$scope.modalsDiv = $scope.modalsDiv + modalVar;
The view:
<div ng-bind-html="modalsDiv"></div>
If I inspect and see the rendered elements, every div element is rendered but their attributes are stripped out.

Answer 1

Controllers should not be adding HTML to the view.
<!--REPLACE ng-html-bind
<div ng-bind-html="modalsDiv"></div>
-->
<!--WITH ng-if -->
<div ng-if="showModal">
<div class="modal fade" id="deleteModal{{data.data.id}} +'" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
Alert
</h4>
</div>
<div class="modal-body">
<p>Are you sure to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-danger"
ng-click="deleteFunc(data.data.id)"
data-dismiss="modal">
Yes
</button>
</div>
</div>
</div>
</div>
</div>
JS
//$scope.modalsDiv = modalVar;
$scope.showModal = true;
Instead of composing HTML in the controller, use the ng-if directive. The code will be much more readable.

Answer 2

try this in your controller:
someVar = $sce.trustAsHtml('someVar');
do not forget to inject $sce into ctrl