Angularjs newbie - second JSON datasource does not display

May 18, 2022
Reaction score

very new to Angularjs and would appreciate some help.

In the code below, part a) works fine and populates a table (table a) as required. Now, I want to be able to click on a line in the table and bring up a div containing a table with additional data in which is part b).

When I click a line, I get the div and table appearing, the variable passed, but the second table is not populated ..just printing thr AngularJS field names eg, {{ y.Charge }}.

Is anybody able to give me any pointers as I am stumped why the first works but the second does not?

note: both webpages return JSON in the correct format.

//angularjs to fetch JSON data
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
.then(function (response) {$scope.recds =;


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

app.controller('charges', function($scope, $http) {
.then(function (response) {$scope.chgs =;




<body style="background-color: #F1FAFA">

<div ng-app="myApp" ng-controller="customersCtrl">

(a table)

<table id="Summary">
<th class="auto-style6" style="width: 66px">Annual<br>Ranking<br><span class="auto-style7">(this week)</span></th>
<th>Cust <br> Status</th>
<th>% of <br>Annual<br>Revenue</th>
<th>This week</th>
<th style="width: 71px">week-2</th>
<th>&nbsp;&nbsp; YTD <br>Revenue</th>
<th>Receipted <br>Pallets</th>
<th>Delivery <br>Loads</th>
<th>Last<br>Agreed £</th>

<tr ng-repeat="x in recds">
<td class="auto-style2" style="width: 66px" ng-click="wkdata1(x.Account)">{{ x.Position }}<span class="auto-style8"> ({{ x.WPosition }})</span></td>
<td id="act" class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Account }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Customer }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.CType }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Perc }}</td>
<td class="auto-style5" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.ThisWeek}}&nbsp;</span><img ng-src="{{(x.LastWeek - x.ThisWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.LastWeek }}&nbsp;</span><img ng-src="{{(x.Week2 - x.LastWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" style="width: 71px"><span class="auto-style4" ng-click="wkdata1(x.Account)">{{ x.Week2 }}&nbsp;</span><img ng-src="{{(x.Week3 - x.Week2) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Week3 }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.YTD }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recs }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recsplt }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.dels }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.delsplt }}</td>
<td id="preview" class="auto-style3">{{ x.preview }}</td>


(b table)
<div id="div1" class="block2" ng-app="myApp" ng-controller="charges">
<table id="charge">
<tr ng-repeat="y in chgs">
<td>{{ y.Customer }}</td>
<td>{{ y.ChargeCode }}</td>
<td>{{ y.Charge }}</td>

Many Thanks



Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question