JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script>
    var app = angular.module('myApp', [])
    app.controller('MyController', 
        function($scope) {
            $scope.dataModel = {fName: '', lName: ''}
            $scope.fieldRequired = true;
            $scope.fieldRequired2 = false;
    
            $scope.submit = function(){
                console.log($scope.theForm.$valid);
            }
        }
    );
    
    app.directive('requiredConfig', function($compile){
        return {
            link: function(scope, element, attrs){
                console.log(attrs.requiredConfig);
                console.log(attrs.ngRequired);
                attrs.ngRequired = (attrs.requiredConfig == "true") ? true : false;
                $compile( element.contents() )( scope );
                console.log(attrs.ngRequired);
                console.log('_______________________');
            }
        }
    });
</script>   

<div ng-controller="MyController">
    <form name="theForm" ng-submit="submit()">
        <input type="text" required-config="{{fieldRequired}}" ng-model='dataModel.fName' />{{fieldRequired}}<br><br>
        <input type="text" required-config="{{fieldRequired2}}" ng-model='dataModel.lName' />{{fieldRequired2}}<br><br>
        <input type="Submit" value="Submit" />
    </form>
</div>