JSFiddle - React, Tailwind, and code Playground

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<body ng-app="myApp">
	First Directive :	
    <first-dir >
        <h3>{{firstCtrl.data}}</h3>
        <button ng-click="firstCtrl.set('NEW VALUE')">Change Value</button>
	</first-dir>
    Second Directive : 
    <second-dir>
        <h3>{{secondCtrl.data}}</h3>
	</second-dir>
</body>

CSS

button{
    position : absolute;
    right : 50px;
}
h3{
    padding : 50px;
    border : solid 1px lightgrey;
    width : 200px;
}

JavaScript

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

	app.directive("firstDir", function(){
		return {
			restrict : 'E',
			controller : function(){		
				this.data = 'init value';
                this.set = function(value){
                    this.data = value;
                    // communication with second Directive ???
                }		
			},
			controllerAs : 'firstCtrl'
		};	
	});
    
    app.directive("secondDir", function(){
		return {
			restrict : 'E',
			controller : function(){		
				this.data = 'init value';	
			},
			controllerAs : 'secondCtrl'
		};	
	});

})();