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",['$compile','$http','$templateCache',function($compile, $http,$templateCache) {
    return {
        scope:{
            sourceData:"=sourceData"
        },
        restrict:"E",
       
        link: function (scope, element, attrs) {
            $http.get((scope.sourceData.style == "stdRadio")?"dynamicComponentRadio.html":"dynamicComponentCheckBox.html", {cache: $templateCache}).then(function(data){
          
                     element.html(data.data);
        // compile the html against the scope
        return $compile(element.contents())(scope);
            });
                      
        }
    }
}]);