How to convert json data values from panel to table on onclick function

I have json data and stored in panel, How to convert the panel data to table

<div ng-repeat="x in mycustomers">
            <div class="col-md-4 mypanel">
                <div class="panel-group">
                    <div class="panel panel-danger">
                        <div class="panel-heading">{{x.name}}</div>
                        <div class="panel-body">{{x.city}}</div>
                    </div>
                </div>
            </div>
        </div>
<script>
        var app = angular.module("myapp", []);
        app.controller("myctrl", function($scope) {
            $scope.mycustomers = [
              {name: 'WardBell',Gender: 'Male',city: 'Dallas, Texas',orders: '15 Orders'},
               {name: 'Robin Cleark',Gender: 'female',city: 'Los Angeles,California',orders: '8 Orders'},
                {name: 'Albert Einstein',Gender: 'Male',city: 'Seattle,Washington',orders: '10 Orders'},
                 {name: 'Misko Hevery',Gender: 'Male',city: 'Anaheim,California',orders: '3 Orders'},
                  {name: 'Marcus HighTower',Gender: 'Male',city: 'Phoenix,Arizona',orders: '6 Orders'},
                  {name: 'Albert Einstein',Gender: 'Male',city: 'Seattle,Washington',orders: '10 Orders'},
                   {name: 'Misko Hevery',Gender: 'Male',city: 'Anaheim,California',orders: '3 Orders'},
                    {name: 'Marcus HighTower',Gender: 'Male',city: 'Phoenix,Arizona',orders: '6 Orders'}
                 ];
        });
    </script>