Angular datatables not rendering html in table and modal

I'm facing an issue with Angular datatables which shows only plain text in my table and bootstrap modal as well My data includes html tags such break lines and bold but it's not rendering and showing as plain text only Tried few troubleshoot but not able to figure it out

HTML

    <div id="crudmodalx" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
          <form method="post" ng-submit="viewData()">
            <div class="modal-header">
              <h4 class="text-secondary">Details <i class="fa fa-user-md"></i></h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </form>
        </div>
        <div class="modal-body">
          <!-- -->
          <ul ng-repeat="name in namesView">
            <div class="card mb-3 bg-light">
              <div class="row g-0">
                <div class="col-md-4">
                  <img ng-src="uploads/default.png" class="img-fluid rounded-start" style="height: 20rem;">
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h5 class="card-title text-primary">{{name.agent}}</h5>
                    <p class="card-text">
                      <i class="fa fa-hospital-o" aria-hidden="true"></i><b> Facility:</b> {{name.facility}}<br>
                      <i class="fa fa-venus-mars" aria-hidden="true"></i><b> Gender:</b> {{name.gender}}<br>
                      <i class="fa fa-flag" aria-hidden="true"></i><b> Gender:</b> {{name.nationality}}<br>
                      <i class="fa fa-hospital-o" aria-hidden="true"></i><b> Specialty: </b>{{name.specialty}}<br>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="card text-white bg-primary mb-3">
              <div class="card-header">Known Expertise:</div>
              <div class="card-body">
                <p class="card-text">{{name.known_expertise}}</p>
              </div>
            </div>
            <div class="card text-white bg-danger mb-3">
              <div class="card-header">Restrictions: </div>
              <div class="card-body">
                <p class="card-text">{{name.other_restrictions}}</p>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </div>
    </div>

<script>
      var app = angular.module('crudApp', ['datatables']);
      app.controller('crudController', function($scope, $http) {

        $scope.success = false;

        $scope.error = false;

        
        //view modal
        $scope.viewModal = function(id) {
          var modal_popup = angular.element('#crudmodalx');
          modal_popup.modal('show');

        };

        //###########

        $scope.viewData = function(id) {
          $http({
            method: "POST",
            url: "view.php",
            data: {
              'id': id,
              'action': 'viewData'
            }
          }).success(function(data) {
            $scope.namesView = data;
            $scope.viewModal();
          });
        };

      });
    </script>

Any guidance will be much appreciated