AngularJS Example

HTML

<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <button data-ng-click="toggleParent()">Toggle Parent</button>
     	<div data-ng-switch data-on="displayDirective">
            <div data-ng-switch-when="true">
                <div class="parentDirective">Parent Directive</div>
            </div>
     	</div>
     </div>
</div>

JavaScript

angular.module('app', [])
    .directive("parentDirective", function($compile){
        return {
            restrict: 'C',
            link: function(scope, element){
             	var secondDirective = angular.element(document.createElement("div"));
                secondDirective.addClass("childDirective");
                
                document.body.appendChild(secondDirective[0]);
                
                $compile(secondDirective)(scope);
            }
        }
    })
    .directive("childDirective", function(){
        return {
            restrict: 'C',
            template: '<div>Child Directive</div>',
            link: function(scope, element){
                scope.$on('$destroy',function() {
                    angular.element(element).remove();
                });
            }
        }
    });


function ParentCtrl($scope){
   $scope.displayDirective = true;
    $scope.toggleParent = function(){
        $scope.displayDirective = !$scope.displayDirective;
    }
}