JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
  <input type="checkbox" ng-model="$root.abc">
  <my-directive/>
</body>

JavaScript

angular.module('myApp', []).directive('myDirective', ['$compile', '$log', function ($compile, $log) {
      var childScope;
      
      function display(scopeId, x) {
        $log.log('func called with', x, 'in scope', scopeId);

        return x;
      }

      return {
        scope: true,
        link: function (scope, element) {
          scope.array = [1, 2, 3];
          scope.display = display;

          scope.$watch(function () {
            return scope.abc;
          }, function (newValue) {
            element.empty();
            
            if (childScope) {
            	childScope.$destroy();
            }
            
            element.append(angular.element('<div ng-repeat="item in array">{{display($id, item)}}</div>'));
            
            childScope = scope.$new();
            
            $compile(element.contents())(childScope);
          });
        }
      };
    }]);