JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <parent data-method="foo(value)"/>
    </div>
</div>

JavaScript

var myApp = angular.module('MyApp', []);

myApp.directive('parent', function () {
    return {
        restrict: 'E',
        replace: 'true',
        scope: {
            methodToCall: '&method'
        },
        template: "<div>" +
            "<button ng-click='finish()'>Parent directive</button><child data-method=\"methodToCall(val) \"></child>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.paragraphs = [];
            scope.pushText = function () {
                scope.paragraphs.push(scope.textToPush);
                scope.textToPush = "";
            }
            scope.finish = function () {
                scope.methodToCall({value: '123'});                                
            }
        }
    }
});

myApp.directive('child', function () {
    return {
        restrict: 'E',
        scope : {
            methodToCall : '&method'
        },
        template : '<button ng-click = "newMethod()">Child directive </button>',
        controller : function($scope) {
        $scope.newMethod = function () {
          console.log('Test child '+ $scope);
          console.log(val);
            //debugger;
        $scope.methodToCall({val : 'Testchild'});
    }
     }
    }
});

myApp.controller('MyController', function ($scope, $window) {

    $scope.foo = function (textArray) {
        console.log('Ctrl method '+textArray)
    };
});