Angular+JQ+Bootstrap

Stack Overflow Questions Tags Users Badges Unanswered Ask Question How to manually trigger AngularJS validation from a button outside of the form tags?

by manoj

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<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" id="clcikMe" 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" linked="clcikMe">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>

    

</div>

JavaScript

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

function MyCtrl($scope) {
    
    $scope.onSubmitted = function() {
        alert('submitted!');
    };
    
}
app.directive("linked",function(){
    return function (scope, element, attrs) {
        var id = attrs["linked"];
        element.on("click",function(){
            document.getElementById(id).click();
        });
    };
});