How to display json using pre tag in angularjs

I want to display the JSON response inside div using ng-repeat. How can I show that JSON in a formatted way?
My code –

<div class="card" ng-repeat="data in finalJson.data">
   <div class="card-body">
   <pre>{{data.json | json}}</pre>
    </div>
</div>
    
 $scope.getJSON=()=>{
  var settings = {
  "url": "https://api/json,
  "method": "GET",
  "timeout": 0,
   };
    
   $.ajax(settings).done(function (response) {
   console.log("response",response);
   $scope.finalJson = response;
   $scope.$apply();
   }).fail(function (error){
       console.log(error);
   });
   }
  }

From this approach I am getting output like –

I want to make something like JSON viewer. How can I do this in angularjs please help