JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div ng-init="test = {p: 'PhoneCtrl', l: 'LandlineCtrl' }">
<communicator controller-name="test.p" message="'test1'" ></communicator>
<communicator controller-name="test.l" ></communicator>
    
</div>

JavaScript

var app = angular.module('myApp',[]).
directive('communicatorInner', ["$parse", "$compile", function($parse, $compile) {
return {
    restrict : 'A',
    template:"<input type='text' ng-model='message'/><input type='button' value='Send Message' ng-click='sendMsg()'><br/>",
    scope: {message:'='},   
    controller: '@'
    };
}]).
directive('communicator', ['$compile', '$parse',function($compile, $parse) {
  return {
    restrict: 'E',
    link: function(scope, elem) {
        if(!elem.attr('communicator-inner')) {
          var name = $parse(elem.attr('controller-name'))(scope);
          elem = elem.removeAttr('controller-name')
              elem.attr('communicator-inner', name);
          $compile(elem)(scope);
        }
    }
  };
}]).
controller("PhoneCtrl",function($scope){
 $scope.sendMsg = function(){
     alert( $scope.message + " : sending message via Phone Ctrl");
    }
}).
controller("LandlineCtrl",function($scope){
    $scope.sendMsg = function(){
        alert( $scope.message + " : sending message via Land Line Ctrl ");
    }
})