JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script id="tempTemplate" type="text">
    <div>
        Current Dir: {{ ngVarTemp.Name }} <br />
        Rename: <input ng-model="ngVarTemp.Name" /> <br />
        <button ng-click="AddChild($event)">Add Child</button>
    </div>
</script>

<div ng-app="TempExplorer">
    <div ng-controller="TempExplorerCtrl">
        <div nx-explore ng-model="CurrentPath"></div>
        <br />
        <div>
            <pre> {{ CurrentPath | json }} </pre>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('TempExplorer', []);
app.controller("TempExplorerCtrl", ["$scope", function($scope){
    $scope.CurrentPath = {
        Name: 'My Documents',
        CreatedOn: new Date(),
        Directories: [
            {
                Name: 'Pictures',
                CreatedOn: new Date()
            }
        ]
    }
    
    $scope.AddChild = function(e){
        console.log('hi');
        
        $scope.$apply(function(){
            $scope.CurrentPath.Directories = [];
            $scope.CurrentPath.Directories.push({
                Name: 'Child A',
                CreatedOn: new Date()
            });
        });
    }
}]);

app.directive('nxExplore', function($compile){
    return {
        retrict: 'A',
        scope: {
            ngVarTemp: '=ngModel'
        },
        link: function(scope, element, attrs, controller) {
            var a = $('#tempTemplate').text();
            var aHtml = $.parseHTML(a);
            var aDom = $(aHtml);
            
            $compile(aDom)(scope);
            $(element).replaceWith(aDom);
        }
    }
});