using angular $http and php to retrieve data

i can send data to mysql table and it is working good. now i want to get that data. i tried this code but it doesn't show any data from mysql table. can anyone help? maybe there is a different way? thank you

PHP code:

 <?php
      $con = mysqli_coect('localhost','root','','hamatkin');
      if(!$con){
        die("couldnt coect".mysqli_error);
      }
      $query = "SELECT * FROM customers";
      $result = $con->query($query);
      $r = array();
      if( $result->num_rows>0){
        while($row = $result->fetch_assoc()){
          $r[] = $row;
        }
      }
      $res = json_encode($r);
       echo json_encode($res);
    ?>

Controller:

"use strict";
var app = angular.module('dataSystem',[]);
app.controller('customerCardsCtrl',function($scope,$route,$location,$http){
  $http({method:'GET', url:'api/get-allCustomers.php'})
      .then(function(response) {
             $scope.customers = response.data;
      })
      // This will log you the error code and trace, if there is an error.
      .catch(function(err) {
            console.log(err)
      });
  });
});

html code:

ufeff<!DOCTYPE html>
<html >
<head>
    <title></title>
</head>
<body>
    <h1>כאן יהיו רשימת כרטיסי לקוחות</h1>
    <div>
      <table ng-controller="customerCardsCtrl" >
        <tr ng-repeat="x in customers">
        <td> {{ x.customer_id}} </td>
        <td>{{ x.first_name }}</td>
        <td>{{ x.last_name }}</td>
        <td> {{ x.id}} </td>
        <td> {{ x.city}} </td>
        <td> {{ x.adress}} </td>
        <td> {{ x.phone}} </td>
        <td> {{ x.email}} </td>
        <td> {{ x.fax}} </td>
        <td> {{ x.referrer}} </td>
        <td> {{ x.Idea}} </td>
        </tr>

        </table>
    </div>
</body>
</html>