JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="name" />
    <div my-directive>{{name}}</div>
    <button ng-click="changeColor()">Change Color</button>
</div>

CSS

.red {
    color : red !important;
}

.blue {
    color : blue !important;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('myController', function($scope) {
    $scope.name = "Daniel";
    
    $scope.changeColor = function() {
        $scope.$emit('ChangeColor');
    };
});

myApp.directive('myDirective', function(){
    return function(scope, element, attrs) {
        element.css({'font-weight' : 'bold'});
        
        scope.$on('ChangeColor', function() {
            if(element.hasClass('red')) {
                element.removeClass('red');
                element.addClass('blue');
            } else {
                element.removeClass('blue');
                element.addClass('red');
            }
        });
    }
});