JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="myCtrl">
    <my-changer txtVal="someVal"></my-changer>
    <my-receiver txtVal="someVal"></my-receiver>
</div>

JavaScript

angular.module("myapp", [])
.controller("myCtrl", function($scope){
	$scope.someVal = "Hello";
}).directive("myChanger", function(){
	return {
    	restrict: "E",
        scope: {
            txtVal : "="
      },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    };
}).directive("myReceiver", function(){
	return {
    	restrict: "E",
        scope: {
            txtVal : "="
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    }
})