JSFiddle - React, Tailwind, and code Playground

HTML

<span ng-controller="myContr">
<div effect-color="color">content here</div>
</span>

JavaScript

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

myApp.directive('effectColor', [

function () {
    return {
        restrict: 'A',
        scope: {
            effectColor: '='
        },
        link: function (scope, element, attrs) {
            element.css({
                color: scope.effectColor
            });
        },
        controller: [
            '$scope', '$element', '$attrs', '$location',

        function ($scope, $element, $attrs, $location) {
            console.log($scope.effectColor);
        }]
    }
}]);

myApp.controller('myContr',

function ($scope) {
    $scope.color = 'red';
});