Форма проверки с другого контроллера в angularjs

Question

У меня есть 2 контроллера: btnController и formController. Я пытаюсь отправить форму из другого действия контроллера. Проблема в том, что функция в контроллере должна вызываться только тогда, когда проверка формы действительна. Прямо сейчас, если пользователь пытается отправить форму без записи, вызывается функция submit.

Как я могу это исправить?

Мой код

<div ng-app='app'> 
    <div class='header' ng-controller='btnController'> 
     <button ng-click='submit()'> 
      Submit Form 
     </button> 
    </div> 

    <div class='container' ng-controller='formController'> 
     <h2>Form</h2> 
     <form id='myform'> 
      <input ng-model='name' placeholder='name' required/> 
      <span style="color:red" ng-show="myform.name.$dirty &&  myForm.name.$invalid"> 
       <span ng-show="myform.name.$error.required">Username is required.</span> 
      </span> 
     </form> 
    </div> 
</div> 


(function(){ 
    var app=angular.module('app',[]); 
    app.controller('btnController',function($scope){ 
     $scope.submit=function(){ 
      angular.element(document.getElementById('myform')).scope().submit(); 
     } 
    }); 

    app.controller('formController',function($scope){ 
     scope.name; 
     $scope.submit=function(){ 
      alert($scope.name); 
     } 
    }); 
})(); 

Вот пример JsFiddle

Answer 1

Edit:

Передать() функцию в 'formController' будет называться только тогда, когда форма действует:

app.controller('btnController',function($scope){ 
    $scope.submit=function(){ 
     var elementScope = angular.element(document.getElementById('myform')).scope(); 
     if(elementScope.myform.name.$valid) 
     elementScope.submit(); 
    } 
}); 

НовыйJsfiddle: https://jsfiddle.net/oucdodf8/