XSS issue in the angularjs application - angularjs

Question

This is regarding injecting the script tag (given below) in one of the input and it's description field. Values are saving fine and showing in the grid.
Go to this <script>window.alert('abc')</script> and fill out the FAFSA.
Form fields:-
You can see in the below screenshot that the alert script is running from the description field.
Modal implementation (execute on click of the document type link in the listing):-
$rootScope.showNormalModal = function (message) {
var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" +
"<span aria-hidden='true'>×</span></button> " +
"<h4 class='modal-title' id='myModalLabel'><div>" +
"</div>" + message + "</h4></div>";
var modalInstance = $modal.open({
template: modalHtml,
controller: function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
});
If the input parameter has script tag with some operation, it is not showing in the UI as it is, instead the script is running before the modal.
Expected behavior here is when I clicked on the anchor in the listing, it should show its description in the popup. what is happening here is, before showing the description, I am getting a alert window because of the script tag injection.
How will I avoid the alert script getting executed before the popup.
Attached all the screenshots below.
Listing Page :-
Alert Window :-
Description Popup :-
Thanks in advance.

Answer 1

Can you please try below code
$rootScope.showNormalModal = function (message) {
var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" +
"<span aria-hidden='true'>×</span></button> " +
"<h4 class='modal-title' id='myModalLabel'><div>" +
"</div><div ng-bind=\"message\"></div></h4></div>";
var modalInstance = $modal.open({
template: modalHtml,
controller: function ($scope, $modalInstance, message) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.message = message;
},
resolve: {
message: function () {
return message;
}
}
});
}