JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app">
<ng-form name="userForm" ng-controller="myFormCtrl" novalidate>
    <div use-text-box name="xyz" ng-maxlength="10" required> </div>

    <br />   <br />  
    <button type="submit" ng-click="processForm()" class="btn btn-success">Submit</button>
</ng-form>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('myFormCtrl',function($scope,$element){
    $scope.form = $element.controller('form');
    $scope.test_xyz = '';
    
    $scope.processForm = function(){
        console.log('Processing!');
    };
});
app.directive('useTextBox', function($compile,$timeout) {
    
              return {
                  replace:true,
                  scope: false,
                  compile: function(element,attrs) {
                      
                        var name =  attrs.name;
                      
                        var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';
    
                      var htmlText = '<div><input type="text" id="' + name + '" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" ng-model="test_' + attrs.name + '" required>' +   maxLengthError + '</div>';
                      
                      element.replaceWith(htmlText);
                      /*$compile(htmlText)(scope,function(_element,_scope){
                        element.replaceWith(_element);
                      });*/
                      
                } // end link
              };
});