JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div infomanager>
        <div info="'this is some info'"></div>
        <div showinfo></div>
    </div>
</div>

JavaScript

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

app.directive('infomanager', function() {
    return {
        controller: function() {}
    };
});

app.directive('info', function() {
    return {
        restrict : 'A',
        require: '^infomanager',
        scope : {
            info : '=info'
        },
        link: function(scope, element, attrs, infoManager) {    
            infoManager.info = scope.info;
        }
    };
})

app.directive('showinfo', function(){
    return {
        restrict:'A',
        template:'<div>{{info}}</div>',
        require:'^infomanager',
        link: function(scope, element, attrs, infoManager) {
            scope.info = infoManager.info;
        }
    }
})