JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div data-directive-a data-checked="true" data-value="#33ff33">
        <div data-directive-b></div>
    </div>
</div>

JavaScript

var app = angular.module('test', []);
app.directive('directiveA', function () {
    return {
        template: '<div>' 
            + 'inside parent directive: {{obj.attr}}'
            + '<input type="checkbox" ng-model="obj.attr" />'
            + '<div ng-transclude></div>'
            + '</div>',
        transclude: true,
        replace: true,
        scope: {},
        controller: function ($scope, $element, $attrs) {
            $scope.obj = {
                attr: $attrs.checked == 'true' ? true : false,
                value: $attrs.value
            };
            
            this.getObj = function () {
                return $scope.obj;
            };
        }
    };
});
app.directive('directiveB', function () {
    return {
        template: '<div>' 
            + '<span>inside transcluded directive: {{obj.attr}}</span>'
            + '<input type="text" ng-model="obj.value" />'
            + '</div>',
        replace: true,
        require: '^directiveA',
        scope: true,
        link: function (scope, element, attrs, directiveA) {
            scope.obj = directiveA.getObj();
        }
    };
});