JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="soQuestion">   
    <div ng-controller="controller">
        <div example foo="keyword_{{value}}"></div>
    </div>
</div>

CSS

[example]{
    height :20px;
    background : red;
}

JavaScript

angular.module('soQuestion', [])
.directive('example', function () {
    return {
        compile: function (tElement, tAttrs) {
            if (tAttrs.foo && tAttrs.foo.match(/^keyword/)) {
                tElement[0].setAttribute('foo', 'prefix-' + tAttrs.foo);
                console.log(tElement.attr('foo'), tElement[0]);
            }
            return function(){};
        }
        
    };
})
.controller('controller', function($scope) {
    $scope.value = 'test';
});