JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Ctrl">
    <button ng-click="toggle()">Toggle</button>
    <div id="toggleTarget" my-dialog>
        Some content = {{myContent}}
        <button ng-click="inc()">+</button>
    </div>
</div>

JavaScript

function Ctrl($rootScope, $scope, $element, $compile) {
    $scope.myContent = 1;
    
    var target = angular.element(document.getElementById("toggleTarget"));
    var placeholder = angular.element("<div>Placeholder</div>");
    var targetFn = $compile(target);
            
    
    var removed = false;
    
    $scope.toggle = function(){
        $scope.myContent += 1;
        console.log(target);
        console.log(targetFn);
        
        if (removed) {
            placeholder.replaceWith(targetFn($scope));
            removed = false;
        }
        else {
            target.replaceWith(placeholder);
            removed = true;
        }    
    }
    
    $scope.inc = function(){
        $scope.myContent += 1;
    };
}

angular.module('app', [])

.directive('myDialog', function() {
  return {
    restrict: 'A',
    link: function (scope) {
    	console.log('myDialog');
      scope.name = 'Jeff';
       scope.$on('$destroy', function() {
          console.log("destroy");
         
        });      
    }
  };
});