JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Test as t">
         <h3>Angular works fine {{ t.data | json}}</h3>
        <hr/>
        <!-- First example -->
        <div>
            <parent-container>
                <div class="shidhin">
                    This is the original content: {{ name }}
                     <h3>This is the content in the main page.Can it have the scope from teh app.controller('Test') here instead of the new scope in parent controller. it should be like this. <i>Angular works fine [ "Shidhin", "Jacob" ]</i> but it is not.-> {{ t.data | json}}</h3>
                </div>
             </parent-container>
        </div>
            
        <!-- Second example -->    
        <div>
            <parent-container>
                <child-content></child-content>
            </parent-container>
        </div>
    </div>
</div>

JavaScript

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

app.controller('Test', function () {
    this.data = ['Shidhin', 'Jacob'];
});


app.directive('childContent', function () {

    return {
        restrict: 'EA',
        template: '<div> This is the child directive and my age is : {{ age }}</div>',
        link: function (scope) {
            scope.age = 3;
        }
    };

})


app.directive('parentContainer', function ($compile) {
    return {
        restrict: 'EA',
        scope: true,
        compile: function (tElement) {
            var html = tElement.html();
            tElement.html(`<div>
<a href="#" ng-click="load()">Click here to load the original content</a>
<div class="IT_SHOULD LOAD HERE">--It should load here--</div>
</div>`);
            return function (scope, elem) {
                scope.load = function () {
                    var isolatedScope = scope.$new(true);
                    isolatedScope.name = 'Jacob';
                    $(elem).find('.LOAD.HERE').html($compile(html)(isolatedScope))
                }
            }
        }
    };
})