JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="miketa">
    <div ng-controller='main'>
        main's name:{{_name}}
        <outer><inner></inner></outer>
    </div>
</div>
'outer' parent's name: <span id='opn'></span>
<br/>
'innessr' parent's name: <span id='ipn'></span>

JavaScript

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

function main($scope) {
    $scope._name = 'main';
};
module.directive('outer', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div></div>',
        link: function ($scope) {
            $scope._name = 'outer';
            document.getElementById('opn').innerHTML = $scope.$parent._name;
        }
    }
});
module.directive('inner', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div></div>',
        link:  function ($scope) {
            alert("f")
            document.getElementById('ipn').innerHTML = "hi " + $scope.$parent._name;
        }
    }
});