JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="TestCtrl">
        
        <input custom-directive="name" /><br />
        {{ model.name }}

    </div>
</div>

JavaScript

angular
    .module('myApp', [])

    .controller('TestCtrl', function($scope){
        var model = $scope.model = {
            name: null
        };
        
        $scope.$watch( 'model.name', function() {
            console.info(model);
        });
    })

    .directive( 'customDirective', function( $compile ) {
        return {
            link: function( scope, elem, attrs ) {
                var name = attrs.customDirective;
                var type = attrs.type;
                
                elem.attr( 'id', name );
                elem.attr( 'name', name );
                elem.attr( 'ng-model', 'model.' + name );
                !type && elem.attr( 'type', 'text' );
                elem.removeAttr( 'custom-directive' );
                
                $compile(elem)(scope);
            }
        };
    });