the code below, creates a table of data and works OK.

******************* works OK**************************

//angularjs to fetch JSON data for table

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

********************************************************

I want to click on a table line and dynamically create a second table with charge data. The code below returns a correct JSON file, which is displayed in the alarm, but does not display in the generated html.....the table is created but the angularjs JSON placeholders are just displayed: eg { x.Charges }.

Does anybody have any ideas why please?

//angularjs to fetch JSON data for charges
    $scope.go=function(x) {
        
        
            
                $http.get("http:///Charges.aspx?ac=" + x)
                .then(function (response) {$scope.chgs = response.data;
                
                alert(JSON.stringify($scope.chgs.records2));

*********************** Doesn't work************************************                    
                var lines='<table>';
                lines +='<tr>';
                lines +='<th>Account</th>';
                lines +='<th>Chargecode</th>';
                lines +='<th>Rate</th>';
                lines +='</tr>';
                lines +='<tr ng-repeat="x in chgs">';
                lines +='<td>{{ x.Customer }}</td>';
                lines +='<td>{{ x.ChargeCode }}</td>';
                lines +='<td>{{ x.Charge }}</td>';
                lines +='</tr>';
                lines +='</table>';
                document.getElementById("div1").innerHTML=lines;
                document.getElementById("div1").style.visibility = 'visible';
                //})
                })  
                        
    }
************************************************************************************
})
})

Many Thanks

Rob