Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="formCtrl as form">
  <form ext-submit ng-submit="form.submited(this)" name='payForm' novalidate>
      <input type="text" name="userName" ng-model="form.data" ng-required="true" value="">
      <button type="submit">
      Internal Submit
      </button>
  </form>
</div>


<!-- button out of form -->
<button class="btn btn-small" 
      ng-controller="bntCtrl as btn" 
      ng-click="btn.submitForm('payForm')"> External Submit </button>

JavaScript

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

myApp.directive("extSubmit", ['$timeout',function($timeout){
    return {
        link: function($scope, $el, $attr) {
            $scope.$on('makeSubmit', function(event, data){
              if(data.formName === $attr.name) {
                $timeout(function() {
                  $el.triggerHandler('submit'); //<<< This is Important
                  //$el[0].dispatchEvent(new Event('submit')) //equivalent with native event
                }, 0, false);   
              }
            })
        }
    };
}]);

myApp.controller('bntCtrl', function($rootScope) {
	this.submitForm = function() {
  	$rootScope.$broadcast('makeSubmit', {formName: 'payForm'})
  }
});

myApp.controller('formCtrl', function() {
	this.data = '';

	this.submited = function(scope) {
  	alert(scope.payForm.$valid ? 'Valid' : 'Invalid!!!');
  }
});