This has been one of the most frustrating issues I've ever encountered.
Snippet from my html file:
<!--test_management.html-->
<div ng-controller="TestCtrl as tcl">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Selected Tests</a></li>
<li><a href="#pane2" ng-click="loadOnAdditionalData()" data-toggle="tab">Additional Testing</a></li>
<li><a href="#pane6" ng-click="loadJenkinsData()" data-toggle="tab">Jenkins Jobs</a></li>
</ul>
<div class="tab-content" ng-controller="TestCtrl">
<div id="pane1" class="tab-pane active">
... (remaining content omitted for brevity) ...
</div>
app.js (In TestCtrl controller.)
$scope.loadJenkinsData = function(){
$scope.jenkins_jobs_data = [];
$http.get("/jenkins_jobs_by_product/ESX").then(
function(response){
$scope.jenkins_jobs_data = response.data;
console.log($scope.jenkins_jobs_data);
} );
};
When I open the tab and run loadJenkinsData, the console logs show that the data is retrieved correctly and stored in $scope.jenkins_jobs_data.
However, on the actual webpage, where the data should be displayed, it shows an empty array instead of the expected information.
I've used similar code in the past without issue. Why isn't it working now? Any tips on troubleshooting or fixing this problem would be appreciated.
P.S.: I attempted using $scope.$apply() at the end of loadJenkinsData(), but it didn't make a difference.