JSON Data not populating correctly

I am getting data from the test2 JSON file which populates correctly. However, I want to click on a resulting table entry and make a div table appear with charges relevant to that customer but all I get is:

Account             Chargecode           Rate

{{ x.Customer }}    {{ x.ChargeCode }}  {{ x.Charge }}

AngularJS

//angularjs to fetch JSON data
//data for main table(this works)

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http:///test2.aspx")
    .then(function (response) {
        $scope.recds = response.data.records;
    });

//function to make DIV visible and display charge data (data not displayed)

    $scope.wkdata1=function(ac) {
        document.getElementById("div1").style.visibility = 'visible';

        var app2 = angular.module('myApp2', []);
        app2.controller('charges', function($scope, $http) {
            $http.get("http:/charges.aspx")
                .then(function (response) {
                    $scope.chg = response.data.records2;
                });
        });
    
    };
});

HTML for charges

<div id="div1" class="block2" ng-app="myApp2" ng-controller="charges">
 <table>
   <tr>
   <th>Account</th>
   <th>Chargecode</th>
   <th>Rate</th>
 </tr>
 <tr ng-repeat="x in chg">
   <td>{{ x.Customer }}</td>
   <td>{{ x.ChargeCode }}</td>
   <td>{{ x.Charge }}</td>
 </tr>  
 </table>
</div>

Note: both json files pulls back data when run in isolation.