This is most annoying problem I have ever had.

**My html snippet**:

```
    <!--test_management.html-->
    <div ng-controller="TestCtrl as tcl">
    <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab">Populated 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">
    <ul class="nav nav-tabs">
    <br />
    <button type="button" ng-click="runTests()" class="btn btn-primary active">Run Tests</button>
    <button type="button" ng-click="toggleRunModal()" class="btn btn-primary active">Check Run Status</button>
    <br />
    <br />
      <li class="active"><a href="#pane3" data-toggle="tab">Selected Tests</a></li>
      <li><a href="#pane4" data-toggle="tab">NextGen Tests</a></li>
      <li><a href="#pane5" data-toggle="tab">Default Tests</a></li>
      </ul>
      <div class="tab-content">
    <div id="pane3" class="tab-pane">
    <table class="table">
    <thead>
    <tr>
    <th>Test Name</th>
    <th>Set CPD Flag</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="test in populated_tests_data" class="info">
    <th>[[test]]</th>
    <th><md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model='set' ng-change="addTestToRunlist(test)">
    </md-switch></th>
    </tr>
    <tr ng-repeat-end></tr>
    </tbody>
    </table>
    </div>
<div id="pane4" class="tab-pane">
<table class="table">
<thead>
<tr>
  <th>Test Name</th>
  <th>Set CPD Flag</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in nextgen_list[current_pr]" class="info">
  <th>[[test]]</th>
  <th><md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model='set' ng-change="addTestToRunlist(test)">
  </md-switch></th>
</tr>
<tr ng-repeat-end></tr>
</tbody>
</table>
</div>
<div id="pane5" class="tab-pane">
<table class="table">
<thead>
<tr>
  <th>Test Name</th>
  <th>Set CPD Flag</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
  <div id="pane2" class="tab-pane">
    <br />
    <md-switch class="md-primary" ng-model="granularityLevel" aria-label="Switch 2" ng-true-value="true" ng-false-value="false" ng-change="loadOnAdditionalData(page_no_tests)"><label>Show test level granularity</label></md-switch>
  <br />
      <md-autocomplete flex md-selected-item="selectedTest" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display" md-floating-label="Search Test Feature Name">
    <md-item-template>
      <span md-highlight-text="searchText">[[item.display]]</span>
    </md-item-template>
    <md-not-found>
      No matches found.
    </md-not-found>
  </md-autocomplete>
  <center>
  <table>
  <tr>
  <th>
   <button ng-click="previousPageTests()" class="btn btn-default">&nbsp;&laquo;&nbsp;</button>
   </th>
   <th>
     &nbsp;&nbsp;[[page_no_tests]] / [[test_feature_name_pages]]&nbsp;&nbsp;
   </th>
   <th>
     <button ng-click="nextPageTests()" class="btn btn-default">&nbsp;&raquo;&nbsp;</button>
   </th>
   </tr>
   </table>
   </center>
  <!--<md-progress-circular md-mode="indeterminate" ng-show="progress_on" md-diameter="50"></md-progress-circular>-->
    <treecontrol class="tree-classic"
   tree-model="testDataWithBranch"
   options="treeOptions"
   on-selection="updateTestData(node)"
   selected-node="node1"
   >
   [[node.name]]
  </treecontrol>
  <br /><br />
  <center>
  <table>
  <tr>
  <th>
   <button ng-click="previousPageTests()" class="btn btn-default">&nbsp;&laquo;&nbsp;</button>
   </th>
   <th>
     &nbsp;&nbsp;[[page_no_tests]] / [[test_feature_name_pages]]&nbsp;&nbsp;
   </th>
   <th>
     <button ng-click="nextPageTests()" class="btn btn-default">&nbsp;&raquo;&nbsp;</button>
   </th>
   </tr>
   </table>
   </center>
</div>
<div id="pane6" class="tab-pane">
  [[tcl.jenkins_jobs_data]]
</div>
  </div>
  </div>
  </div>

```

**app.js (Inside 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);
} );
};

```

Now when the tab is opened and loadJenkinsData is executed, in my logs I can see that the data is printed accurately, suggesting that $scope.jenkins\_jobs\_data has been successfully updated.

But on the html page it prints an empty array where it is supposed to get the value with which jenkins\_jobs\_data.

I have written similar code before and it has worked. Why is this different? Any suggetions on debugging this issue or resolving it would be greatly appreciated.

P.S.: I have tried using $scope.$apply() at the end of loadJenkinsData(), and it hasn't helped.