JSFiddle - React, Tailwind, and code Playground

HTML

<html data-ng-app="app">
    
    <head></head>
    
    <body data-ng-controller="designController">
        <table class="table">
            <tr>
                <td>column1</td>
                <td>column2</td>
            </tr>
        </table>
        <table class="table" data-ng-class="getTableClass()">
            <tr>
                <td>column1</td>
                <td>column2</td>
            </tr>
        </table>
    </body>

</html>

CSS

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

JavaScript

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

	function ($compile) {
	    return {
	        restrict: 'C',
	        replace: false,
	        controller: function ($scope) {
	            $scope.getTableClass = function () {
	                console.log("inner controller");
	                return "green";
	            };
	        },
	        compile: function (elem, attr) {
	            if (!elem.data("isCompiled")) {
	                elem.data("isCompiled", true);
	                elem.attr("data-ng-class", "getTableClass()");
	                var fn = $compile(elem);

	                return function (scope) {
	                    fn(scope);
	                };
	            }
	        }
	    };
	}]).controller('designController', ['$scope', function ($scope) {
	    $scope.getTableClass = function () {
	        return 'blue';
	    };
	}]);;