JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="AppCtrl" master="getText()">
        <p>{{text1}}</p>
        <div the-directive=""></div>
    </div>
</div>

JavaScript

var app = angular.module("app",[]);

app.controller("AppCtrl", function($scope) {
    $scope.text = "Blablabla More";
    $scope.text1 = "Text1";
    
    $scope.getText = function() {
        return $scope.text;
    };
});

app.directive("theDirective", function() {
    return {
        restrict: "A",
        require: "^master",
        link: function(scope,elem,attrs,masterCtrl) {
            elem.text(masterCtrl.callMe());
        }
    };
});

app.directive("master", function($parse) {
    return {
        restrict: "A",
        controller: function($scope, $attrs) {
            var fn = $parse($attrs.master);
            this.callMe = function() {
                return fn($scope);
            };
        }
    };
});