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 outer-directive data-model="vm">
    </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'
        },
        template: "<div ng-if='vm_o.isEnabled'><span inner-directive data-model='vm_o'></span></div>"
    };
});

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