How to activate ng-submit from a timer call-back? - angularjs

Question

I have a timer that would re-submit the page at intervals. Is there an angular way to do that?
Right now I was just submitting the form inside a script:
<script type="text/javascript" defer="defer">
window.setTimeout( function () {
document.getElementById( "srchForm" ).submit();
}, 300000 ); //5 min
</script>
<form id="srchForm" ng-controller="OutageViewController" ng-submit="loadData(0)">
<p id="div_srchForm"> ....</p>
<button id="btnReload" type="submit" >Submit</button>
</form>
but it would give me 404 error status:
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable

Answer 1

Use $interval service to schedule a function for repeated execution with a time interval in between.
Example that used the $interval service to schedule a function call every 3 seconds:
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope, $interval) {
$scope.loadData = function() {
console.log("loadData - Interval occurred");
};
$interval(function() {
$scope.loadData();
}, 3000);
});
<form id="formX" ng-controller="MainCtrl" ng-submit="loadData(0)">
<p id="div_srchForm"> ....</p>
<button id="btnReload" type="submit">Submit</button>
</form>
https://plnkr.co/edit/yqMW9ZENoqZwfDtqlsTy

Answer 2

I would rather ask why you are trying to simulate a button click in the first place. As others have hinted at, browser automation as a user experience is typically a poor choice and reflects poor organization in your software design. I would recommend using the $timeout already available in Angular to do this from the controller instead. Not only does this put your front end logic where it belongs,in the controller, but also gives you a clean teardown mechanism so your timer doesn't continue I run if the controller isn't active (and prevents you from writing another hack to mitigate that).

Answer 3

I have found a non-Angular way to work around to get to the ng-submit handler:
Looks like I cannot call form.submit in the callback. When I did that, they can't "see" ng-submit and it lost me where the call has taken me when it complained not finding "resources" which is the page itself! My work-around to connect to the ng-submit is,
Now instead of doing form.submit in the callback, I click the submit button which is just primitive js but it did the job!
<script type="text/javascript" defer="defer">
window.setTimeout( function () {
document.getElementById( "btnReload" ).click();
//window.location.reload();
}, 300000 ); //5 min
</script>
The button activated ng-submit because of the way the scope of submit was set up. Just don't ask me why clicking the button is working but form-submitting is not working!
After all, I still want to know the Angular Way to do it, not my primitive js !!