JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
     {{'Scope '+$id}}
     <wizard-card>
         {{"transcluded scope "+$id}}<br>
         {{'scope.bla='+bla}}
     </wizard-card>
</div>

JavaScript

angular.module("myApp",[]);

angular.module('myApp').directive('wizardCard', function() {
    return {
        restrict : 'E',
        scope : {
           current : '@',
           checkoutStates: '='
        },
        transclude:true,
        template: '<p>wizard scope {{$id}}</p>',
        link: function(scope, element, attrs,ctrl,transclude){
            scope.bla = "ajcnasc";
            transclude(scope, function(clone, scope) {
                element.append(clone);
          });
        }
    };
});