JSFiddle - React, Tailwind, and code Playground

HTML

<html data-ng-app="app">
    
    <head></head>
    
    <body data-ng-controller="DesignController">
        <table class="table">
            <tr>
                <td data-ng-class="getCellClass()">Hardcoded attribute</td>
                <td>column2</td>
            </tr>
        </table>
        <table class="table" data-ng-controller="DataController">
            <tr>
                <td class="cell">Attribute with directive</td>
                <td>Column2</td>
            </tr>
        </table>
        <table class="table" data-ng-controller="DataController">
            <tr data-ng-repeat="cell in data">
                <td class="cell">Attribute with directive {{cell.index}}</td>
                <td>Column2</td>
            </tr>
        </table>
    </body>

</html>

CSS

.table tr {
    background-color: red;
}
.table td.green {
    background-color: green;
}
.table td.blue {
    background-color: blue;
}

JavaScript

angular.module('app', [])
	    .directive('cell', ['$compile',

	function ($compile) {
	    return {
	        restrict: 'C',
	        replace: false,
	        compile: function (elem, attr) {
	            if (!elem.data("isCompiled")) {
	                elem.data("isCompiled", true);
	                elem.attr("data-ng-class", "getCellClass()");
	                var fn = $compile(elem);

	                return function (scope) {
	                    fn(scope);
	                };
	            }
	        }
	    };
	}])
    .controller('DesignController', ['$scope', function ($scope) {
	    $scope.getCellClass = function () {
	        return 'blue';
	    };
	}])
    .controller('DataController', ['$scope', function ($scope) {
	    $scope.getCellClass = function () {
	        return 'green';
	    };
        $scope.data = [];
        function init()
        {
            for(i = 0; i < 1; i++)
            {
                $scope.data.push({index: i});
            }
        }
        init();
	}]);