I've pasted the relevant snippet of my code below. I know the base angularJS is working because the HTML document doesn't display the {{}} variables, but instead, I get a blank.
I believe it's because it's getting a null value for the variables. When I do a few console.log expression WITHIN the controller, I can see that the value is updated accordingly, but it is different outside the controller.
Code:
<div ng-controller="rangeSort">
<h3>Range Selection</h3>
<div class="row">
<div class="col-md-4">
<h5><b>Observer</b></h5>
<select class="form-control" ng-model="obSelection">
<option value="" >All</option>
<option ng-repeat="observer in observersS" value="{{observer}}">{{observer}}</option>
</select>
</div>
<div class="col-md-4">
<h5> <b>Host</b></h5>
<select class="form-control" ng-model="hostSelection">
<option value="" >All</option>
<option ng-repeat="host in hostsS" value="{{host}}">{{host}}</option>
</select>
</div>
<div class="col-md-4">
<h5> <b>Bug</b></h5>
<select id="chooseBug" class="form-control" ng-model="bugSelection">
<option value="" >All</option>
<option ng-repeat="bug in bugsS" value="{{bug}}" >{{bug}}</option>
</select>
</div>
</div>
<!--div ng-repeat="bugItem in bugsJSONList | filter: obSelection | filter: hostSelection | filter: bugSelection" > {{bugItem.bug}} on {{bugItem.host}} , observer {{bugItem.observer}} </div-->
<div class="row">
<div style="text-align: center; margin-bottom: 15px" ng-repeat="observer in observerKeys | filter: obSelection" >
<h5><b> {{observer}}</b></h5>
<div class="row">
<div class="col-md-6" ng-repeat="host in hostKeys | filter: hostSelection" >
<br> <span style="text-decoration:underline"> Host {{host}} </span>
<div style="text-align: left" ng-repeat="bug in bugsS | filter: bugSelection" >
<div ng-repeat="item in JSONbugsList[observer][host][bug]">{{bug}} from {{item.start}} to {{item.end}}</div>
</div>
</div>
</div>
</div>
</div>
<script>
var summaryApp = angular.module('summaryApp', []);
summaryApp.controller("rangeSort", function($scope) {
hosts =[], observers =[], bugs =[], JSONbugsList =[];
hostKeys = [], observerKeys = [], bugKeys = [];
bugTracker = {};
$.getJSON('../java_output/bug_summary.json', function (data) {
JSONbugsList = data;
var numObservers = data.numObservers;
var bugTracker = {};
for (var observer = 1; observer <= numObservers; observer++) {
observers.push(observer);
observerKeys = Object.keys(data);
observerKeys.splice(observerKeys.indexOf('numObservers'));
for (var host in data["observer" + observer]) {
if (hosts.indexOf(host) == -1) {
hosts.push(host);
}
hostKeys = Object.keys(data["observer" + observer]);
for (var bug in data["observer" + observer][host]) {
if (bugs.indexOf(bug) == -1) {
bugs.push(bug);
}
for (var i in data["observer" + observer][host][bug]) {
bugTracker[bug] = true;
var dateVar = data["observer" + observer][host][bug][i];
var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))}
}
}
}
}
console.log ("host keys " + hostKeys);
var overviewVars = ['Congestion','Highlatency','LownumOIO'];
var overviewSpaceVars = ['Congestion','High latency','Low numOIO'];
for (var i in overviewVars) {
console.log (overviewVars[i]);
$('#' + overviewVars[i] + 'Content' ).append ('<p>There are' + ((bugTracker[overviewSpaceVars[i]])?' errors in ':' no errors in ') + overviewVars[i] + '.</p>');
$('#' + overviewVars[i] + 'Content' ).append ('<button type=\"button\" class=\"btn\" onclick=\"displayRanges('+overviewSpaceVars[i]+')\">View Bug Ranges</button>');
}
function displayRanges (bug) {
$('#chooseBug').val(bug);
}
//console.log(bugsCounter);
for (var i = 1; i <= numObservers; i++) {
$('#links').append('<a href=\"#observer' + i + '\">Observer ' + i + ' </a>');
if (i != numObservers) {
$('#links').append(' - ');
}
}
$scope.hostsS = hosts;
$scope.bugsS = bugs;
$scope.observersS = observers;
$scope.JSONbugsList = JSONbugsList;
$scope.hostKeys = hostKeys;
$scope.observerKeys = observerKeys;
$scope.start = 'start';
$scope.end = 'end';
});
});
</script>
<hr>
</div>
