Currently, I have a main controller that retrieves data containing x and y coordinates of a table (rows and columns).

Each cell has a child controller responsible for preparing the values it will display based on the x and y values from the parent controller.

Right now, nothing appears on the screen until the entire process is completed.

I'm looking to change this behavior so that the entire table is initially rendered with only column header values and the first cell value in each row. Then, the child controllers should load the remaining cell values one at a time...

Here's a simplified demo demonstrating the undesired behavior: https://jsfiddle.net/coolcatDev/xmtg3q31/1/

Template:

<div ng-controller="MyCtrl">
  <table class="table-bordered">
    <tr>
      <th>Y/X</th>
      <th ng-repeat="valX in x">{{valX}}</th>
    <tr>
    <tr ng-repeat="valY in y">
      <td>{{valY}}</td>
      <td ng-repeat="valX in x">
        <div ng-controller="MyCtrl2">
          {{value}}
        </div>
      </td>
    <tr>
  </table>
</div>

Controller:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.x = ['a','b','c','d','e','f','g'];
    $scope.y =      ['1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10','1','2','3','4','5','6','7','8','9','10'];
}

function MyCtrl2($scope) {
    $scope.value = $scope.valX + $scope.valY;
}

The actual implementation:

Template:

  <script type="text/ng-template" id="comparison">
    <div ng-controller="comparisonController" class="container-fluid">
      <h3>Choose comparison table structure</h3>
      <div class="multiDropMenus" ng-dropdown-multiselect="" options="colXoptions" selected-model="colXoptionsModel" translation-texts="xBtnLabel" extra-settings="settingsXaxisBtn" events="updateModelX">
      </div>
      <div class="multiDropMenus" ng-dropdown-multiselect="" options="colYoptions" selected-model="colYoptionsModel" translation-texts="yBtnLabel" extra-settings="settingsYaxisBtn" events="updateModelY">
      </div>
      <div class="multiDropMenus" ng-dropdown-multiselect="" options="colValueoptions" selected-model="colValueoptionsModel" translation-texts="valueBtnLabel" extra-settings="settingsValueaxisBtn" events="updateModelV">
      </div>
      <div class="multiDropMenus" ng-dropdown-multiselect="" options="colGroupingoptions" selected-model="colGroupingoptionsModel" translation-texts="groupingBtnLabel" extra-settings="settingsGroupingaxisBtn" events="updateModelG">
      </div>
      <br>
      <button ng-if="colXoptionsModel && colYoptionsModel && colValueoptionsModel && colGroupingoptionsModel" ng-click="createTable()" type="button" class="btn btn-default btn-sm col-xs-12"><span class=""></span> Create table</button>
      <br>
      <div class="container-fluid" style="overflow-x:scroll;">
        <table ng-if="tableReady" class="table-bordered" style="width:100%;overflow-x:scroll;">
          <tr>
            <th>{{colYoptionsModel.attobj.name}}/{{colXoptionsModel.attobj.name}}</th>
            <th ng-repeat="x in uniqueX" ng-init="colHeader = x.get4(colXoptionsModel.key)[0].attributes.displayName[0] || x.get4(colXoptionsModel.key).toString()">
              {{colHeader}}
            </th>
          </tr>
          <tr ng-repeat="y in uniqueY" ng-init="rowIndex = y.get4(colYoptionsModel.key)[0].attributes.displayName[0] || y.get4(colYoptionsModel.key).toString()">
            <td>{{rowIndex}}</td>
            <td ng-repeat="x in uniqueX">
              <div ng-controller="comparisonValues">
                  <div ng-repeat="dbo in cellValues">
                    <div ng-if="grouping" ng-init="attobj = colGroupingoptionsModel; key = attobj.key; values=dbo.get4(attobj.key); template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);">
                      <div class="contentDecompressed" customtemp></div>
                    </div>
                    <span style="clear:both;"></span>
                    <div ng-init="attobj = colValueoptionsModel; key = attobj.key; values=dbo.get4(attobj.key); template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);">
                      <div class="contentDecompressed" customtemp></div>
                    </div>
                  </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </script>

Controllers:

app.controller('comparisonValues', ['$scope',
  function ($scope) {
        console.log('loading cell');
        
        var checkX = $scope.x.get4($scope.colXoptionsModel.key)[0].cid || $scope.x.get4($scope.colXoptionsModel.key).toString();
        var checkY = $scope.y.get4($scope.colYoptionsModel.key)[0].cid || $scope.y.get4($scope.colYoptionsModel.key).toString();

        $scope.cellValues = _.filter($scope.allDBOS, function(dbo){ 
          var checkDboX = dbo.get4($scope.colXoptionsModel.key)[0].cid || dbo.get4($scope.colXoptionsModel.key).toString();
          var checkDboY = dbo.get4($scope.colYoptionsModel.key)[0].cid || dbo.get4($scope.colYoptionsModel.key).toString(); 

          if(checkDboX == checkX && checkDboY == checkY){
            return dbo;
          }
        });
        if($scope.cellValues.length > 1){
          $scope.grouping = true;
        }
        $scope.compressed=false;

}]);

app.controller('comparisonController', ['$scope', '$location', '$http', '$q', 'templateService',
  function ($scope, $location, $http, $q, templateService) {
    $scope.getAttributeTemplate = templateService.getAttributeTemplate;

    $scope.tableReady = false;
    $scope.compare.val = false;

    //Initialize models and dropdown settings

    //Create table functionality

    //Get unique x and y values    

}]);