JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <button ng-click="vm.isEnabled = !vm.isEnabled">Toggle</button>
    <br/>

    Hi, {{vm.name1}}!
    <div ng-if="vm.isEnabled" outer-directive data-model="vm">
        <span inner-directive data-model="vm"></span>
    </div>
</div>

JavaScript

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

app.controller('DemoCtrl',['$scope', function($scope) {
    $scope.vm = {
        name1: 'Bert',
        name2: 'Ernie',
        isEnabled: true
    };
}]);

app.directive('outerDirective', function() {
    return {
        restrict: 'A',
        scope: {
            vm_o: '=model'
        },
        transclude: true,
        template: "<div><span ng-transclude></span></div>"
    };
});

app.directive('innerDirective', function() {
    return {
        restrict: 'A',
        scope: {
            vm_i: '=model'
        },
        transclude: true,
        template: "Hi, {{vm_i.name2}}!"
    }
});