How to manually trigger AngularJS validation from a button outside of the form tags?

Question

Given this code:

<div ng-controller="MyCtrl">     <form ng-submit="onSubmitted()">      Header inputs:         <input type="name" ng-model="sample" required/>         <input type="name" ng-model="sampleX" required/>          <input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>     </form>      <hr/>      Some other form here. Think line items      <hr />     <a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>   </div>   var app = angular.module('myApp', []);  function MyCtrl($scope) {      $scope.onSubmitted = function() {         alert('submitted!');     }; } 

I want the last button to trigger the validation(then submit when things are valid) on first form. As of now, only the button inside the form can trigger that form's validation and submission. Is there any possible way for a button outside the form to do that?

Live test: http://jsfiddle.net/dzjV4/1/

Answer 1

You can create directive which you can then attach to <a class="btn".... Check this jsfiddle

http://jsfiddle.net/dzjV4/2/

Note that I added to <input type='submit' id='clickMe'... and linked it with link at the bottom <a class='btn' linked="clickMe"...