JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <custom-directive test-text="ctrl.text"></custom-directive>
  </div>
</div>

JavaScript

angular
	.module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('CustomDirectiveController', CustomDirectiveController)
  .directive('customDirective', customDirective);
  
  function DefaultController() {
  	var vm = this;
    vm.text = 'Hello, ';
  }
  
  function customDirective() {
  	var directive = {
    	restrict: 'E',
      template: `<a href="#">{{vm.testText}}</a>`,
      scope: {
      	testText: '='
      },
      controller: CustomDirectiveController,
      controllerAs: 'vm',
      bindToController: true
    };
    
    return directive;
  }
  
  function CustomDirectiveController() {
  	var vm = this;
    // transforming/updating the value here
    vm.testText = vm.testText + 'World!';
  }