JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="myStuf" ng-app="app" ng-controller="myController" ng-click="spawn()">

</div>
<div id="inside"></div>

CSS

.myStuf
{
    width:90px;
    height:90px;
    background-color:magenta;   
}
#psi
{
    width:90px;
    height:90px;
    background-color:cyan;
    
}

JavaScript

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


function ctrl2($scope)
{

    alert('ctrl2');
    
    $scope.removeSelf = function()
    {
        var t = angular.element(document.getElementById('psi'));
        t.remove();        
    }

}

mod.controller('ctrl2',ctrl2);

mod.controller('myController',function($scope,$compile){
    
    $scope.spawn = function(){
        
        var bod = angular.element(document.getElementById("inside"));
                 bod.append( "<div ng-controller=\"ctrl2\" id='psi' ng-click='removeSelf()'></div>");
        
        var psi = angular.element(document.getElementById('psi'));
            
        var keys = [];
        
        for(var t in bod)
        {
            keys.push(t);
        }
        
        alert(keys);
        
        $compile(bod.contents())($scope);        

    };
});