JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.fromController" />
        <testel some-attr="{{data.fromController}}">
             <h3>Transclude fromDirective: <span style="color:red">{{fromDirective}}</span></h3>
             <h3>Transclude data.fromController: <span style="color:red">{{data.fromController}}</span></h3>
        </testel>
    </div>
</div>

JavaScript

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

    app.controller('Ctrl', function ($scope) {
        $scope.data = {};
    });

    app.directive('testel', function () {
        return {
            restrict: 'E',
            scope: {
                fromDirective: '@someAttr'
            },
            transclude: true,
            link: function (scope) {},
            template: '<div ng-transclude>' +
                '<h3>Template fromDirective: <span style="color:red">{{fromDirective}}</span></h3>' +
                '<h3>Template data.fromController: <span style="color:red">{{data.fromController}}</span></h3>' +
                '</div>'
        }
    });