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',
        link: function (scope, element, attrs) {
            var wrappedElement = angular.element(
                '<input type="' + attrs.type + '" ng-model="' 
                 + attrs.myDirective + '">');
            element.replaceWith(wrappedElement);
            $compile(wrappedElement)(scope);
        }
    }
});

function MyController($scope) {
    $scope.test = 'test';

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