JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="htmlCtrl">
    <div id="localResults" class="bucketLocalResultsDiv" ng-bind-html="content">
    </div>
    <div id="someotherdiv" ng-bind-html="otherContent"></div>
    <button ng-click="updateHtml()">Update</button>
    <button ng-click="updateLoadedHtml()" ng-if="content">Update Inner</button>
</div>

JavaScript

var myApp = angular.module('myApp', []);

function htmlCtrl($scope, $http, $sce) {
    $scope.content = $sce.trustAsHtml('<div>This text will be replaced by ajax loaded content.</div>');
    $scope.otherContent = $sce.trustAsHtml('I am inside some other div.');
    
    $scope.updateHtml = function () {
        console.log("Updating..");
        $http.post('/echo/html/', {
                html: '<p id="ajaxloaded"><span>I was loaded dynamically via</span><span> ajax</span> call.</p>',
                delay: 3
            }).then(function (data) {
            	var html = data.config.data.html;
            	$scope.content = $sce.trustAsHtml(html);
        },function (err) {console.log(err);});
    };
    
    $scope.updateLoadedHtml = function(){
      	  var ajaxLoaded = document.getElementById("ajaxloaded");
        var innerHtml = ajaxLoaded.innerHTML;
        //console.log(innerHtml);
        $scope.otherContent = $sce.trustAsHtml(innerHtml);
    };
    
}