JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <debug source='html'></debug>
    <div id="target"></div>
</div>

JavaScript

angular.module('app', []).config(
    function($sceDelegateProvider) {         $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'https://gist.githubusercontent.com/**'
      ])
    }
);
    
angular.module('app').directive('debug', function() {
    return {
        restrict: 'E',
        templateUrl: "https://gist.githubusercontent.com/neilsarkar/dcf4dc8dce0c9469f56c/raw/b85c14090c89455a675ef6827d2177913433dd09/gistfile1.html",
        link: function($scope, el, attrs) {
          $scope.source = attrs.source

          if( attrs.autoApply ) {
              $scope.$apply()
          }
        },
        scope: true
    }
})

setTimeout(function() {
    var html = "<div><debug source='xhr (auto-applied)' auto-apply='1'></debug><br /><debug source='xhr'></debug></div>",
        target = document.getElementById('target'),
        $injector = angular.injector(['ng','app']),
        $compile = $injector.get('$compile'),
        $scope = angular.element(target).scope();

    target.innerHTML = html;
    $compile(target)($scope);
    $scope.$digest()
}, 0)