JSFiddle - React, Tailwind, and code Playground

HTML

<script id="myform" type="text/ng-template">
    <form action="">
        First Name: <input name="fname" type="text" />
       Last Name: <input name="lname" type="text" />
        <input type="checkbox" name="food" value="Steak"/> Steak
        <input type="checkbox" name="food" value="Egg"/> Egg
        <input type="button" value="remove" ng-click="remove()" />
    </form>
</script>

<mydir></mydir>

JavaScript

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

/* UNCOMMENT ME
app.directive('test', function () {
    return {
        templateUrl: 'myform',
        restrict: 'E',
        require: "^mydir",
        replace: true,
        scope: {
        },
        link: function (scope, element, attrs, mydirCtrl) {
            scope.remove = function () {
                element.remove();
                mydirCtrl.remove();
            }
        }
    }
});
*/ 

app.directive('mydir', function ($compile, $templateCache) {
    return {
        template: '',
        restrict: 'E',
        controller: function () {
            this.remove = function () {
                console.log("got it!");
            }
        },
        link: function (scope, element, attrs) {
            
            app.directive('test', function () {
                return {
                    templateUrl: 'myform',
                    restrict: 'E',
                    require: "^mydir",
                    replace: true,
                    scope: {
                    },
                    link: function (scope, element, attrs, mydirCtrl) {
                        scope.remove = function () {
                            element.remove();
                            mydirCtrl.remove();
                        }
                    }
                }
            });
            
            element.append($compile('<test></test>')(scope));
        }
    }
});