JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='app'>
    <div ng-controller='MainController'>
        <div ng-bind='getName()'></div>
        
        <div ng-controller='Child1'>
            <div ng-bind='getName()'></div>
            
            <div ng-controller='Child2'>
                <div ng-bind='getName()'></div>
            </div>
        </div>
    </div>
</div>

JavaScript

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

myApp.controller('MainController', ['$scope', function($scope) {
    $scope.name = 'main';
    $scope.getName = function() {
        return $scope.name;
    };
}]);
myApp.controller('Child1', ['$scope', function($scope) {
    $scope.name = 'child1';
}]);
myApp.controller('Child2', ['$scope', function($scope) {
    $scope.name = 'child2';
}]);