Edit in JSFiddle

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

app.controller('DemoCtrl', function($scope) {
    $scope.name = 'world';
});
app.directive('myDirective', ['$parse', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        template: '<div>transcluded: <span style="color:red" ng-transclude></span></div>'
    };
}]);
app.directive('myDirective2', ['$parse', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        template: '<div>transcluded: </div>',
        controller: function($element, $attrs, $transclude) {
            // modify the transcluded scope then add the cloned node to the template
            $transclude(function(clone, scope) {
                scope.name = 'AngularJS';
                var transcluded = angular.element('<span style="color:red"></span>').append(clone);
                $element.children().append(transcluded);
            });
        }
    };
}]);

<h3>Custom transclude demo</h3>
        
<div ng-controller="DemoCtrl">
    scope.name = {{ name }}
    <br><br>
    <div data-my-directive >this is original content ({{ name }})</div>
    <br>
    <div data-my-directive2 >this is original content ({{ name }})</div>
    <br><br>
</div>