JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <one></one>
    <two></two>
</div>

JavaScript

//pre-link and post-link
var app = angular.module('app', []);
app.directive('one', function () {
    return {
        restrict: 'EA',
        template: '<div>{{greeting}} {{name}} <another></another> </div>',
        link: {
          pre:function(scope,elem,attr){
            scope.name = 'Mr.x';
            scope.greeting = 'Good Morning';
           }
        }
    };
});
app.directive('another', function () {
    return {
        restrict: 'EA',
        template: '<div class="son">{{value}}</div>',
        link: {
            post:function(scope,elem,attr){
            scope.value = "Hello World:"+scope.greeting;
            }
        }
    };
});

//comunicate between the directives using controller
app.directive('two',function (){
  return{
    restrict: 'EA',
    template:'<div> {{quote}} <three></three> </div>',
    controller:function(){
    this.quote = 'All is Well'
    },
    link:function(scope,elem,attr,ctrl){
       scope.quote = ctrl.quote;
    }
  }
})

app.directive('three',function(){
   return{
    restrict: 'EA',
    require:'^two',
    template:'<div> {{val}}</div>',
    link:function(scope,elem,attr,ctrl){
       scope.val = 'Nice' + ctrl.quote;
    }
  }
})