JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as myCtrl">
  <textarea rows="5" cols="50" ng-model="myCtrl.text" my-directive="abc"
            my-method="myCtrl.inputAbcd()"
            my-function="myCtrl.doubleInput(character)"
            my-text="myCtrl.text"></textarea>
  <div>
    {{myCtrl.text}}
  </div>
</div>

JavaScript

angular.module("myApp", [])
	.directive("myDirective", ["$parse", function($parse){
  	return {
    	restrict: "A",
      link: function(scope, element, attrs){
      	element.on("keypress", function(e){
        	console.log(attrs.myDirective);
          
          // scope.$apply(scope.$eval(attrs.myMethod));
          scope.$apply(attrs.myMethod);
          
          scope.$apply(function(){
          	scope.$eval(attrs.myFunction, {character: e.key});
          });
          
          var textModel = $parse(attrs.myText);
          console.info(textModel(scope));
          
          scope.$apply(function(){
          	textModel.assign(scope, "bbbcccddd");
          });
          console.info(textModel(scope));
        });
      }
    };
  }])
  .controller("myController", [function() {
  	var self = this;
    
    self.inputAbcd = function(){
    	self.text = "abcd";
    };
    
    self.doubleInput = function(letter){
    	self.text += letter;
    };
  }]);