JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div ng-controller="MyController">
    <h1>{{test}}</h1>
    <hr />
    <input type="text" my-directive="test" />
</div>

JavaScript

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

myApp.directive('myDirective', function ($compile) {
    return {
        restrict: 'A',        
        compile: function(element, attrs) {
            element.attr('ng-model', attrs.myDirective);
            element.removeAttr("my-directive");
            element.attr('ng-class', '{\'class\' : testFunction()}');
            return {
               pre: function preLink(scope, iElement, iAttrs, controller) { },
               post: function postLink(scope, iElement, iAttrs, controller) { 
                 $compile(iElement)(scope);
               }
            }
        }
    }
});

function MyController($scope) {
     $scope.test = 'test';  
    
    $scope.testFunction = function () {
       return true;   
    };
}