JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/ng-template" id="/form.html">
    <div style="border: 1px solid red; padding: 5px;">
        <div ng-form name="mySubForm">
            <input type="text" ng-model="model" placeholder="Enter any value" ng-required="true" />
            
            <input type="button" value="Submit Button" ng-disabled="{{name}}.$invalid" />
        </div>
        <p>
            <strong>You typed: </strong>{{value}}<br />
            <strong>Form invalid (ngInclude)?:</strong> {{mySubForm.$invalid}}
        </p>
    </div>
</script>

<div style="border: 1px solid blue; padding: 5px;" ng-form name="myForm">
    <my-form model="value"></my-form>
    
    <p>
        <strong>You typed: </strong>{{value}}<br />
        <strong>Form invalid? (parent scope):</strong> {{myForm.$invalid}}
    </p>
    
    <input type="button" value="Submit Button" ng-disabled="myForm.$invalid" />
</div>

JavaScript

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

    myApp.directive('myForm',function(){
        return{ 
            restrict:'E',
            scope:{model:'='},
            templateUrl:'/form.html',
            replace:true
        }
    });