JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
    <div ng-controller="MainController">
        <button ng-click="toggleStage()">{{stage}}</button>
        <div class="my-directive-placeholder"></div>
    </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    var app = angular.module('app', []);
    app.controller('MainController', function($scope, $compile, $element){
        $scope.stage = 'Add';
        var childScope;

        $scope.toggleStage = function(){
            if ($scope.stage === 'Add'){
                $scope.stage = 'Remove';

                childScope = $scope.$new();
                var compiledDirective = $compile('<div my-directive></div>');
                var directiveElement = compiledDirective(childScope);
                $('.my-directive-placeholder').append(directiveElement);
            } else {
                $scope.stage = 'Add';
            }
        }
    })

    app.directive('myDirective', function($interval){
        return {
            template: '</b>Directive content</b>',
            link: function(scope, el, attrs){

            }
        }
    });
</script>