JSFiddle - React, Tailwind, and code Playground

by CriddleCraddle

HTML

<div ng-app="myApp">
    <div ng-controller="mainCtrl">
    </div>
    
    <directive1>    
        <directive2>
            {{ vm.test }}
        </directive2>
    </directive1>
</div>

JavaScript

angular.module('myApp', [])
.controller('mainCtrl', function ($scope) {
})

.directive('directive1', function () {
    return {
        restrict: 'E',
        scope: false,
        controller: function ($scope) {
           var vm = this;
           vm.test = 'test from directive1'; // This will not work

            $scope.vm = this; // This will work
            $scope.vm.test = 'test from directive1 scope';
        },
        controllerAs: 'vm'
    }
})

.directive('directive2', function () {
    return {
        restrict: 'E',
        scope: false,
        controller: function ($scope) {
            console.log($scope.vm.test)            
        },
        controllerAs: 'vm2',
        bindToController: true
    }
});