JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp" ng-controller="WidgetController">
    <div>{{test}}</div>
    <div ng-repeat="currentDirective in directiveList">
        <{{ currentDirective.directiveName }} />
    </div>
    <!-- <first-directive></first-directive>
    <second-directive></second-directive> -->
</body>

JavaScript

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

myApp.controller("WidgetController", function($scope) {
    $scope.test = 'hello world';
    
    $scope.directiveList = [{'directiveName':'first-directive'},
                              {'directiveName':'second-directive'}]
})
.directive('firstDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
          position: '='
        },
        template: 'First Directive Apple <br />'
    }
})
.directive('secondDirective', function() {
    return {
        restrict: 'E',
        template: 'Second Directive Salami'
    }
})