JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<div ng-app="app">
    <div parent>
        {{ value }}
        <div child>
            {{ value }}
            <button ng-click="updateParent()">update</button>
        </div>
    </div>
</div>

CSS

[parent] {
    height: 150px;
    width: 135px;
    background-color: dodgerblue;
    padding: 15px;
}

[child] {
    height: 100px;
    width: 100px;
    background-color: tomato;
    padding: 15px;
}

JavaScript

var app = angular.module('app', [])

app.directive('parent', function() {
    return {
        link: function(scope, elem, attrs) {
             scope.value = 'parent'            
        }
    }
});

app.directive('child', function() {

    return {
        scope: true,
        link: function(scope, elem, attrs) {
            
            scope.value = 'child'
            
            elem.click(function() {
                scope.$parent.value = 'modded!!'
                scope.$parent.$apply();
            })
        }
    }
});