JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="myCtrl">
    <dynamic-component ng-repeat="com in dynamicAttr" template-style="{{com.style}}" source-data="com"></dynamic-component>
</div>

<script type="text/ng-template" id="dynamicComponentRadio.html">
    <div>
        <div>{{sourceData.label}}</div>
        <input type="radio" name="first" />Radio Button
    </div>
</script>

<script type="text/ng-template" id="dynamicComponentCheckBox.html">
    <div>
        <div>{{sourceData.label}}</div>
        <input type="checkbox" name="first" />Checkbox
    </div>
</script>

JavaScript

angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope) {
    $scope.dynamicAttr = [
        {
            style:"stdRadio",
            label:"First Box"
        },
        {
            style:"stdCheck",
            label:"Second Box"
        }
    ];
}]).directive("dynamicComponent",[function() {
    return {
        scope:{
            sourceData:"=sourceData"
        },
        restrict:"E",
        templateUrl:function(elm,attrs) {
            // I want to return template name based on style attribute which I want to set dynamically while using directive
            return "dynamicComponentCheckBox.html";
            
            // I want help here..
            // I want to load template dynamically based on the style attribute
        }
    }
}]);