Filling table AngularJS

Question

I need to create a table with the following object:

        this.customer =
    [{
        cid:"1",
        productid:"1",
        src:"walmart",
        total:"1"
    },
    {
        cid:"1",
        productid:"1",
        src:"target",
        total:"2"
    },
    {
        cid:"1",
        productid:"1",
        src:"tjmax",
        total:"2"
    },
    {
        cid:"1",
        productid:"2",
        src:"walmart",
        total:"1"
    },
    {
        cid:"1",
        productid:"2",
        src:"target",
        total:"4"
    },
    {
        cid:"1",
        productid:"2",
        src:"tjmax",
        total:"0"
    },
   {
        cid:"2",
        productid:"1",
        src:"walmart",
        total:"0"
    },
    {
        cid:"2",
        productid:"1",
        src:"target",
        total:"3"
    },
    {
        cid:"2",
        productid:"1",
        src:"tjmax",
        total:"6"
    },
{
        cid:"2",
        productid:"2",
        src:"walmart",
        total:"4"
    },
    {
        cid:"2",
        productid:"2",
        src:"target",
        total:"6"
    },
    {
        cid:"2",
        productid:"2",
        src:"tjmax",
        total:"8"
    }];

I need to build a table using AngulaJS and Bootstrap; I have no problems with bootstrap. I am trying to use ng-repeat, but I am not getting the result that I want. This is how I need my table.

+-------------------------------------------+
| cid | productId1       | productId2       |
+-----+------------------+------------------+
| 1   | wal:1,tar:2,tj:2 | wal:1,tar:4,tj:0 |
+-------------------------------------------+
| 2   | wal:0,tar:3,tj:6 | wal:4,tar:6,tj:8 |
+-------------------------------------------+

Can I achieve this with ng-repeat? Any ideas using other directives?

Update 1 SEP 2016

js json. -. , , html. -, . . , 0. Network Responses, json- , -. ? $http.

(function () {
'use strict';
var app =   angular.module('myApp', ['angular.filter']);
// Declare app level module which depends on views, and components
app.controller('CustomerTable', function ($scope, $http) {

    // GET request example:
    $http({
        method: 'GET',
        url: '../_includes/web_service_person.php'
    }).then(function successCallback(data) {
        $scope.customer = data;
    }, function errorCallback(data) {
        console.log(":(");
    });
});

})();

<pre>{{customer | json}}<?pre>, , json-. , , undefined. ?

Answer 1

, customer.

, angular-filter.

jsfiddle.

angular.module("ExampleApp", ['angular.filter'])
  .controller("ExampleController", function($scope) {
    $scope.customer = [{
      cid: "1",
      productid: "1",
      src: "walmart",
      total: "1"
    }, {
      cid: "1",
      productid: "1",
      src: "target",
      total: "2"
    }, {
      cid: "1",
      productid: "1",
      src: "tjmax",
      total: "2"
    }, {
      cid: "1",
      productid: "2",
      src: "walmart",
      total: "1"
    }, {
      cid: "1",
      productid: "2",
      src: "target",
      total: "4"
    }, {
      cid: "1",
      productid: "2",
      src: "tjmax",
      total: "0"
    }, {
      cid: "2",
      productid: "1",
      src: "walmart",
      total: "0"
    }, {
      cid: "2",
      productid: "1",
      src: "target",
      total: "3"
    }, {
      cid: "2",
      productid: "1",
      src: "tjmax",
      total: "6"
    }, {
      cid: "2",
      productid: "2",
      src: "walmart",
      total: "4"
    }, {
      cid: "2",
      productid: "2",
      src: "target",
      total: "6"
    }, {
      cid: "2",
      productid: "2",
      src: "tjmax",
      total: "8"
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
  <table>
    <tr>
      <th>cid</th>
      <th ng-repeat="(product, value) in customer|groupBy:'productid'">productid{{product}}</th>
    </tr>
    <tr ng-repeat="(cid, value) in customer|groupBy:'cid'">
      <td>{{cid}}</td>
      <td ng-repeat="(product, value) in customer|groupBy:'productid'">
        <span ng-repeat="item in value|filterBy:['cid']:cid">
          {{item.src}}:{{item.total}},
        </span>
      </td>
    </tr>
  </table>
</div>

Hide result

Answer 2

: -

<table>
  <thead>
    <th>  cid </th>
    <th>  productId1 </th>
    <th>  productId2 </th>
  </thead>

  <tbody>
    <tr ng-repeat="customer">
      <td>{{customer.cid }}</td>
      <td>{{customer.productId1 }}</td>
      <td>{{customer.productId2 }}</td>
    </tr>
  </tbody>
</table>

Answer 3

.

$http, . :

$http({
        method: 'GET',
        url: 'path'
    }).then(function successCallback(response) {
        $scope.customer = response.data;
        console.log(response.data);
    }, function errorCallback(response) {
        console.log(":(");
    });

@Stepan Kasyanenko , . , , -.