JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div switch-directive="" payload="true"></div>
</div>

CSS

.with-payload,
.without-payload {
    height: 50px;
    width: 50px;
    background-color: blue;
}

JavaScript

angular.module("test", []);
angular.module("test", []).directive("switchDirective", function($compile){
    return {
        scope: {
            payload: '='
        },
        controller: function($scope) {
            $scope.havePayload = $scope.payload
        },
        link: {
            post: function(scope, elem, attrs) {
                 $compile(elem.children(".with-payload").css( "background-color", "red" ))(scope);
            }
        },
        restrict: 'A',
        replace: true,
        template: '<div ng-switch on="havePayload"> \
                        <div ng-switch-when="true" class="with-payload"></div> \
                        <div ng-switch-when="false" class="without-payload"></div> \
                    </div>'
    }
});