JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp" >
    <testcomponent text="hello!"></testcomponent>
</div>

JavaScript

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        link: function ($scope, $element, $attrs) {
            $scope.text = $attrs.text;
            console.log($scope.text);
            setTimeout(function () {
                console.log($scope.text);
            }, 1000);
        }
    };
});