JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app='app'>
    <labeled-input idntfr='id001' element-class='someClass' value-name='person_name' default-value='default name' label='Person Name: '>
    </labeled-input>
    <br/>
    The person name typed is "{{person_name}}"
</body>

JavaScript

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

app.directive("labeledInput", function(){
	return {
		restrict : "E",
		replace : true,
		scope : {
            "idntfr" : "@",
            "elementClass" : "@",
			"valueName" : "=",
			"defaultValue": "@",
			"label" : "@"
		},
        template : "<div id='{{idntfr}}' class='{{elementClass}}' ng-init='valueName=defaultValue'>" +  
        "<span class='label' ng-bind='label'></span>" +
        "<input class='input' type='text' ng-model='valueName'></input>" +
                  "</div>"
    }
});