JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
    <form name="myform" novalidate="">
        <input type="text" required="" name="input1" ng-model="input1" />
        
        <input type="checkbox" required="" name="checkbox" ng-model="checkbox" />
        
        <input type="text" required="" name="input2" ng-model="input2" ng-show="checkbox" ng-required="checkbox" />
    </form>    
    
    <ul>
        <li ng-repeat="item in console track by $index">{{item}}</li>
    </ul>
</div>

JavaScript

angular.module('demo', [])
    .controller('DemoController', ['$scope', function ($scope) {
        $scope.formValid = false;
        $scope.console = [];
               
        $scope.submit = function() {
            if($scope.myform.$dirty && $scope.myform.$valid) {
                $scope.console.push("auto submit");
            }
        };
              
        $scope.$watch("myform.$valid", function(valid) {
            $scope.console.push(valid);
            if(angular.isDefined(valid) && valid) {
                $scope.submit();
            }

            $scope.formValid = valid;
        });
        
    }]);