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, $interval){
        $scope.stage = 'Add';
        var childScope;

        $interval(function(){
            $scope.$broadcast('tick');
        }, 500);

        $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 {
                childScope.$destroy();
                $('.my-directive-placeholder').empty();
                $scope.stage = 'Add';
            }
        }
    })

    app.directive('myDirective', function(){
        return {
            template: '</b>Directive content</b>',
            link: function(scope, el, attrs){
                scope.$on('tick', function(){
                    el.append('-');
                });

                scope.$on('$destroy', function(){
                    alert('Put unbind handlers for timers etc. here')
                })
            }
        }
    });</script>