JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

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

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