How to call different get functions when submit is pressed on the form; angular

Question

I have a three functions in each there is $scope.fetch() which is being called when ng-submit=fetch is pressed. I want one ng-submit button which would call all three fetch() in three functions how can I do this? HTML:

  <div type="text/ng-template" id="getnewcoolios.html" class="users">
          <h1>{{message}}</h1>
<form name="myform" id="myform1" ng-submit="fetch()" >
<input type="date" 
   ng-model="date"  
   value="{{ 'date' | date: 'dd/MM/yyyy' }}" />
<div><center><button type="submit" >Fetch</button></center></div>
</form>
{{formdata.date}}
<ul ng-controller="NewCooliosCtrl" ng-repeat="newCoolio in newCoolios.newCoolios">
  <li>{{newCoolio.personID}},  {{newCoolio.placeID}}, {{newCoolio.datePlaced}}</li>
</ul>
 <ul ng-controller="NewPlacesCtrl" ng-repeat="newPlace in newPlaces.newPlaces">
  <li>{{newPlace}} </li>
  </ul>
 <ul ng-controller="NewUsersCtrl" ng-repeat="newUser in newUsers.newUsers">
  <li>New Users: {{newUser}} </li>
 </ul>

                 </div>

Angular:

  myApp.config(['$routeProvider',
 function($routeProvider) {
  $routeProvider
.when('/getdailydata', {
    templateUrl: 'templates/getnewcoolios.html',
    controller: 'DailyCtrl'
  })
}])
     .controller('DailyCtrl', function($scope) {
 })
 .controller('NewUsersCtrl', function($scope,$http,$filter) {
  $scope.fetch= function(){

var formdata =
{'date' : $filter('date')(this.date, 'dd/MM/yyyy')
};

var inserturl = 'http://94.125.132.253:8001/getnewusers?date=' + formdata.date;

$http.get(inserturl).success(function (data) {
console.log(formdata);
 $scope.newUsers = data;
 console.log(inserturl);
 console.log(data);
  $scope.message = 'List of New Users';
  })}
   })
 .controller('NewPlacesCtrl', function($scope,$http,$filter) {

$scope.fetch= function(){

 var formdata =
 {'date' : $filter('date')(this.date, 'dd/MM/yyyy')
 };

var inserturl = 'http://94.125.132.253:8001/getnewplaces?date=' + formdata.date;

 $http.get(inserturl).success(function (data) {
console.log(formdata);
$scope.newPlaces = data;
console.log(inserturl);
console.log(data);
$scope.message = 'List of New places';
}
)

}
})
.controller('NewCooliosCtrl', function($scope,$http,$filter) {

  $scope.fetch= function(){

var formdata =
{'date' : $filter('date')(this.date, 'dd/MM/yyyy')
 };

var inserturl = 'http://94.125.132.253:8001/getnewcoolios?date=' + formdata.date;

 $http.get(inserturl).success(function (data) {
console.log(formdata);
$scope.newCoolios = data;
console.log(inserturl);
console.log(data);
$scope.message = 'List of New Coolios';
 }
 )}});

Answer 1

You can access outer scope properties in inner scopes, so you can define each fetch function in inner scopes and push them into array of functions to be called on submit. Then, on submit^ just iterate through that array and call each function. Voila.

<div ng-controller="fetcher">
    <form name="myForm" ng-submit="fetch"></form>
    <ul ng-controller="NewCooliosCtrl"></ul>
    <ul ng-controller="NewPlacesCtrl"></ul>
    <ul ng-controller="NewUsersCtrl"></ul>
<div>

.controller('fetcher', function($scope){
    $scope.toFetch = [];
    $scope.fetch = function(){
        for(var i=0; i<$scope.toFetch.length; i++){
             $scope.toFetch[i]();
        }
    }
});
.controller('NewCooliosCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})
.controller('NewPlacesCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})
.controller('NewUsersCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})