JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myModule" ng-controller="MyCtrl">
    <my-component> </my-component>
            
    <my-component></my-component>
</div>

JavaScript

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
    return {
        restrict:'E',
        template: ' <h2>Attribute</h2>{{isolatedAttributeFoo}}',
        scope:{},
        link:function(scope){
           scope.isolatedAttributeFoo = 'Good Bye!';
        }
    };
})
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.isolatedAttributeFoo = 'Hello!';        
    }]);