JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Module">

    
    <div ng-controller="parentController">
      
        {{username}}
        <form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value">
        </form-field>
    </div>
    
    
    
    
    

</div>

JavaScript

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



module.controller("parentController", function ($scope) {
    $scope.username = "Some username .... !";
});


module.directive('formField', function () {

    var label;
    var regex;
    var constrainsViolationMessage;
    var placeHolder;
    var model;


    return {

        restrict:'E',

        transclude:true,

        scope:{
            model:'='
        },

        link:function (scope, element, attr) {

         
            scope.model = "12345";

            scope.$watch('formInput', function (newValue, oldValue) {         
                    scope.model = newValue;   
                console.log(newValue);
            });
            scope.label = attr.label;

        },

        template:'<div class="control-group ">' +

            '<div class="form-label control-label">{{label}}</div> ' +

            '<div class="controls controls-row"> ' +

            '<input type="text" size="15" class="form-input input-medium" ng-model="formInput"  placeholder="{{placeHolder}}">' +

            '<label class="error" ng-show={{hasViolationConstrain}}>{{constrainsViolationMessage}}</label>' +

            '</div>'
    }
});