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) {
	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) {
      	var newContent = angular.element('<div ng-repeat="item in array">{{display($id, item)}}</div>');

        element.empty();

        element.append($compile(newContent)(scope))
      });
    }
  };
}]);