How to insert data to more AngularJS controllers with single ajax call in javascript

I am trying to make single ajax call to server and than to use response to call more AngularJS with same data. I use angular.min.js and ng-table.min.js to create html tables. But it does not work for me.

Thank you for any help.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />

<b>List of Orders 1:</b><br>
    <div>
        <div ng-controller="selectFilterController1">
          <table ng-table="tableParams"  id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
            <tbody>
               <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
                <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
                <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
              </tr>
            </tbody>
          </table>
        </div>
<br><b>List of Orders 2:</b><br>
        <div ng-controller="selectFilterController2">
          <table ng-table="tableParams"  id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
            <tbody>
               <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
                <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
                <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
                <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
              </tr>
            </tbody>
          </table>
        </div>

When I call function ajaxCallOrders(), response is transfered to controllers, but

var app = angular.module('ngTableApp', ['ngTable']);
var datax;
app.controller('selectFilterController1', function($scope, $http, $filter, $q, NgTableParams) {
    var datax;
    $scope.arrayTemp = [];
    module1 = function(response){
            $scope.myData = angular.fromJson(response.data);
            angular.forEach($scope.myData, function(element) {
                $scope.arrayTemp.push(element);
            });     
            datax=$scope.array = $scope.arrayTemp;  
            $scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
        }
})
app.controller('selectFilterController2', function($scope, $http, $filter, $q, NgTableParams) {
    var datax;
    $scope.arrayTemp = [];
    module2 = function(response){
            $scope.myData = angular.fromJson(response.data);
            angular.forEach($scope.myData, function(element) {
                $scope.arrayTemp.push(element);
            });     
            datax=$scope.array = $scope.arrayTemp;  
            $scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
        }
})
ajaxCallOrders = (function(){
    var orderListData = {"token": authToken, "limit": "50"}; 
    $.ajax({
        type: 'POST',
        url: 'orders.php',
        data: JSON.stringify(orderListData), 
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'text',
        processData: false,
        success: function( data, textStatus, jQxhr ){
            var response = data;
            module1(response);
            module2(response);
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
});

Solution

To contain methods and data that are injectable to multiple controllers, create an AngularJS service.

app.service("orders", function($http) {
    var orderListData = {"token": authToken, "limit": "50"};
    var config = { params: orderListData };
    var ordersPromise = $http.get("orders.php",config);

    this.getPromise = function() {
        return ordersPromise;
    });
};

Usage:

app.controller('selectFilterController2', function(orders, NgTableParams) {
    orders.getPromise().then(function(response){
        $scope.array = response.data;
        var xLength = $scope.array.length;    
        $scope.tableParams = new NgTableParams(
            {page: 1, count: xLength},
            {data: datax, counts: [10, 15, 20, xLength]}
        );
    }
})

The service uses the $http service to execute an XHR GET request and store a promise. The orders service can be injected into multiple controllers or other custom services. The getPromise method returns a promise which contains the response from the GET request.

For more information, see

AngularJS Developer Guide - Creating Services