JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="MainController">
        <my-input type="number" name="valueNumber1" ng-model="obj.valueNumber1" label="Age" ng-click="log('click', $event)" ng-change="log('change')" ng-blur="log('blur')" ng-focus="log('focus')" ng-mouseleave="log('mouseleave', $event)"></my-input>
        <div id="result"></div>
    </div>
</div>

JavaScript

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

    app.controller('MainController', function($scope, $window){
        $scope.obj = {valueNumber1: 10};
        $scope.log = function(text, $event) {        
            document.getElementById("result").innerHTML = text + ':' + $scope.obj.valueNumber1 + "<br>" + document.getElementById("result").innerHTML;            
        };
    });

    app.directive('myInput', function($compile) {
        return {            
            restrict: 'EA',
            replace: true,            
            terminal: true,
            priority: 1000,
            template: '<div>' +
            '<label for="{{ name }}">{{label}}</label>' +
            '<input id="{{ name }}"/>' +
            '</div>',            
            compile: function(tElement, tAttrs, transclude) {            
                var tInput = tElement.find('input');                            
                var name = tAttrs.name;
                var label = tAttrs.label;
                if (!tAttrs.ngModel) {
                	throw new Error("ngModel is required!");
                }
                // Move the attributed given to 'custom-input' to the real input field
                angular.forEach(tAttrs, function(value, key) {
                    if (key.charAt(0) == '$')
                        return;
                    tInput.attr(tAttrs.$attr[key], value);
                });                
                tElement.replaceWith('<div class="cbay-input-div">' + tElement.html() + '</div>');
                return function($scope, tElement, tAttrs) {            			
                  var $childScope = $scope.$new(false); // Creating a child non-isolated scope
                  $childScope.name = name;
                  $childScope.label = label;
            			var compiled = $compile(tElement)($childScope);                	
                	return;
                }
            }
        };
    });