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', [

	function () {
	    return {
	        restrict: 'C',
	        replace: false,
            controller: function($scope){
                $scope.getTableClass = function(){
                    console.log("inner controller");
                    return "green";
                };
            },
            compile: function (elem, attr) {
	            return {
	                pre: function preLink(scope, elem, attrs, controller) {
	                    console.log("prelink");
	                    elem.attr("data-ng-class", "getTableClass()");
	                },
	                post: function postLink(scope, elem, attrs, controller) {
	                    console.log("postlink");
	                }
	            }
	        }
	    };
	}]).controller('designController', ['$scope' , function ($scope) {
	    $scope.getTableClass = function () {
	        return 'blue';
	    };
	}]);;