How to push json object array from mysql into empty array in angularjs

Question

I have been trying to retrieve data from mysql. So, I have written in php:

$result = mysqli_query($con,"SELECT * FROM customers");
$return_arr = array();
while($row = $result->fetch_array(MYSQLI_ASSOC))
{
$rowArr = array(
    'id' => $row['id'],
    'firstName' => $row['firstname'],
    'lastName' => $row['lastname'],
    'address' => $row['address'],
    'city' => $row['city']
);
$return_arr[] = $rowArr;
}
echo json_encode($return_arr);

I want to push this data into an array of angularjs success:

var customers = [];

$http.get("app/server/read.php")
    .success(function(data){
        customers.push(data);
        //console.log(data);
    });

If I send single row from mysql, it receives i.e. when I write in php echo json_encode($rowArr);, then var customers able to receives otherwise can't for multiple rows. In the console I get:

[Object { id="36", firstName="asdasd", lastName="asdasd", more...}, Object { id="37", firstName="asdasd", lastName="asdasd", more...}, Object { id="38", firstName="asdasd", lastName="asdasd", more...}, Object { id="40", firstName="asd", lastName="asd", more...}, Object { id="41", firstName="asdasd", lastName="asdasd", more...}, Object { id="42", firstName="asdasd", lastName="asdas", more...}, Object { id="43", firstName="asdasd", lastName="asdasd", more...}]

Please could you help me anyone that where I am doing wrong?

UPDATE:

html:

<div class="col-lg-3 card" data-ng-repeat="customer in customers | orderBy:'lastName'">
    <button class="btn close cardClose" data-ng-click="deleteCustomer(customer.id)">&times;</button>
    <div class="cardHeader">{{customer.firstName + ' ' + customer.lastName}}</div>
    <div class="cardBody">{{customer.city}}</div>
</div>

Controller:

app.controller('CustomersController', function ($scope, customersService, $http) {
init();

function init() {
    $scope.customers = customersService.getCustomers();
 }
});

Service:

app.service('customersService', function ($http) {
    this.getCustomers = function () {
    return customers;
};

var customers = [];
$http.get("app/server/read.php")
    .success(function(data){
        //customers.push(data);
        customers = data;
    });
});

Answer 1

Try this:

app.service('customersService', function ($http, $q) {
   var deferred = $q.defer();
   $http.get('app/server/read.php').then(function(res) {
     deferred.resolve(res);
   });

   var getCustomers = function() {
     return deferred.promise;   
   };

   return {
     getCustomers: getCustomers
   };
});

And in your controller:

 customersService.getCustomers().then(function(customers) {
    $scope.customers = customers;
 });