Dealing with angular two way binding to take DOM Rendering time

84 views Asked by At

I can't see my loading label for fastest two way binding.

I have a flag for show and hide loading label. but am unable to see the loading label. because angular is rendering(binding) very speed.


Expectation 1:-

So I want to show and hide the isloading flag while rendering callback is start and end. I hope this is the proper way to my solution. Is it possible?

Expectation 2:-

And I have check with stack overflow, then are suggest to use $timeout. But I don't think this is a good solution. But if we can't do my first expectation then I can go with the $timeout way. But here I don't set approximate time to $timeout function, I would be set exact DOM rendering time on the $timeout function.


I made following snippet for the issue and you can easily make a snippet answer.

angular.module("app",[]).controller("controllerApp", function($scope)
{
$scope.IsLoading=true;
// now the data binding and rendering is starting 
$scope.data = [
      {
        "FieldGroupName": "General Information",
        "cocVersionDataFieldCollection": [
          {
            "DocumentVersionFieldId": 1,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.1",
            "FieldName": "Make",
            "DisplayOrder": 1,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "11",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": false,
            "varaintData": {
              "VersionId": "number;",
              "DocumentVersionFieldId": "number",
              "VariantId": "number",
              "ElementId": "number",
              "ElementVariantId": "number",
              "VariantValue": "string",
              "IsRecordVisible": "boolean",
              "cocElementLanguageDataCollection":[],
              "hasValidationError": "boolean"
            }
          },
          {
            "DocumentVersionFieldId": 2,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.2",
            "FieldName": "Type",
            "DisplayOrder": 2,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "K",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": false,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1001,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.2",
            "FieldName": "Variant",
            "DisplayOrder": 3,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "1",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1003,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.2.1",
            "FieldName": "Commercial Name(s)",
            "DisplayOrder": 5,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "1",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 3,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.4",
            "FieldName": "Vehicle Category",
            "DisplayOrder": 6,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "11",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 4,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.5",
            "FieldName": "Company Name and Address of the manufacturer",
            "DisplayOrder": 7,
            "IsMultiElement": true,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": true,
            "FieldValueCobmination": "<b>Address Line 2</b>: err; <b>Address line 3</b>: 12; ",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 5,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.6",
            "FieldName": "Location and method of attachent of satutory plates",
            "DisplayOrder": 8,
            "IsMultiElement": true,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": true,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1004,
            "FieldGroupName": "General Information",
            "FieldPrefix": "0.6",
            "FieldName": "Location of the vechicle identification number",
            "DisplayOrder": 9,
            "IsMultiElement": true,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": true,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          }
        ]
      },
      {
        "FieldGroupName": "General Construction Characteristics",
        "cocVersionDataFieldCollection": [
          {
            "DocumentVersionFieldId": 7,
            "FieldGroupName": "General Construction Characteristics",
            "FieldPrefix": "1",
            "FieldName": "Number of Axles",
            "DisplayOrder": 10,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1023,
            "FieldGroupName": "General Construction Characteristics",
            "FieldPrefix": "1",
            "FieldName": "Number of Wheels",
            "DisplayOrder": 11,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 8,
            "FieldGroupName": "General Construction Characteristics",
            "FieldPrefix": "3",
            "FieldName": "Powered Axles",
            "DisplayOrder": 12,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1033,
            "FieldGroupName": "General Construction Characteristics",
            "FieldPrefix": "3",
            "FieldName": "Powered Axles Position",
            "DisplayOrder": 13,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": true,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          }
        ]
      },
      {
        "FieldGroupName": "Main Dimensions",
        "cocVersionDataFieldCollection": [
          {
            "DocumentVersionFieldId": 9,
            "FieldGroupName": "Main Dimensions",
            "FieldPrefix": "4",
            "FieldName": "Wheel Base",
            "DisplayOrder": 13,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "454",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 1007,
            "FieldGroupName": "Main Dimensions",
            "FieldPrefix": "4.1",
            "FieldName": "Axle spacing",
            "DisplayOrder": 14,
            "IsMultiElement": true,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 10,
            "FieldGroupName": "Main Dimensions",
            "FieldPrefix": "5",
            "FieldName": "Length",
            "DisplayOrder": 15,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 11,
            "FieldGroupName": "Main Dimensions",
            "FieldPrefix": "6",
            "FieldName": "Width",
            "DisplayOrder": 16,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": null,
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          },
          {
            "DocumentVersionFieldId": 12,
            "FieldGroupName": "Main Dimensions",
            "FieldPrefix": "7",
            "FieldName": "Height",
            "DisplayOrder": 20,
            "IsMultiElement": false,
            "FieldGroupID": 0,
            "IsMultiRowExist": false,
            "IsMultiLanguage": false,
            "FieldValueCobmination": "15634",
            "IsOptionExists": false,
            "IsSalesVersionExists": false,
            "IsMarketingcodeExists": false,
            "IsMandatoryElementDataMissing": false,
            "IsOverridable": true,
            "varaintData": null
          }
        ]
      }          
    ];   
    // now the data binding and rendering is ending              
   $scope.IsLoading=false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controllerApp">
    <span ng-show="IsLoading">loading...</span>
    <table ng-repeat="obj in data">
        <tr >
            <td>
                <b> {{obj.FieldGroupName}}</b>
                <table style="border:solid 1px dashed; border-color:black">
                    <tr ng-repeat="objChild in  obj.cocVersionDataFieldCollection">
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                        <td>{{objChild.FieldName}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

1

There are 1 answers

0
lin On BEST ANSWER

You can try to sync your DOM / Application like in this simple demo fiddle. It ensures that the ng-repeat did rendered all items before displaying it. Meanwhile loading is displayed. I think it's a little hack but it works like a charm if you realy want to sync. your DOM & JS-Application. IMO this it not needed because E2E binding is async all the time and its fine.

View

<div ng-controller="MyCtrl">
  <span ng-show="isLoading">loading...</span>
  <table ng-repeat="obj in data" ng-show="!isLoading">
    <tr>
      <td>
        <b> {{obj.FieldGroupName}}</b>
        <table style="border:solid 1px dashed; border-color:black">
          <tr ng-repeat="objChild in  obj.cocVersionDataFieldCollection" 
              ng-init="checkLoadingState($index)">
            <td>
              {{objChild.FieldName}}
              <td>
                {{objChild.FieldName}}
                <td>
                  {{objChild.FieldName}}
                </td>
                <td>
                  {{objChild.FieldName}}
                </td>
                <td>
                  {{objChild.FieldName}}
                </td>
          </tr>
        </table>
        </td>
    </tr>
  </table>
</div>

AngularJS Application

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

myApp.controller('MyCtrl', function($scope, $timeout) {

  $scope.isLoading = true;

  // now the data binding and rendering is starting 
  $scope.data = [{
    "FieldGroupName": "General Information",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 1,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.1",
      "FieldName": "Make",
      "DisplayOrder": 1,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "11",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": false,
      "varaintData": {
        "VersionId": "number;",
        "DocumentVersionFieldId": "number",
        "VariantId": "number",
        "ElementId": "number",
        "ElementVariantId": "number",
        "VariantValue": "string",
        "IsRecordVisible": "boolean",
        "cocElementLanguageDataCollection": [],
        "hasValidationError": "boolean"
      }
    }, {
      "DocumentVersionFieldId": 2,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2",
      "FieldName": "Type",
      "DisplayOrder": 2,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "K",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": false,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1001,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2",
      "FieldName": "Variant",
      "DisplayOrder": 3,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "1",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1003,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.2.1",
      "FieldName": "Commercial Name(s)",
      "DisplayOrder": 5,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "1",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 3,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.4",
      "FieldName": "Vehicle Category",
      "DisplayOrder": 6,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "11",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 4,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.5",
      "FieldName": "Company Name and Address of the manufacturer",
      "DisplayOrder": 7,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": "<b>Address Line 2</b>: err; <b>Address line 3</b>: 12; ",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 5,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.6",
      "FieldName": "Location and method of attachent of satutory plates",
      "DisplayOrder": 8,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1004,
      "FieldGroupName": "General Information",
      "FieldPrefix": "0.6",
      "FieldName": "Location of the vechicle identification number",
      "DisplayOrder": 9,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }, {
    "FieldGroupName": "General Construction Characteristics",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 7,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "1",
      "FieldName": "Number of Axles",
      "DisplayOrder": 10,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1023,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "1",
      "FieldName": "Number of Wheels",
      "DisplayOrder": 11,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 8,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "3",
      "FieldName": "Powered Axles",
      "DisplayOrder": 12,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1033,
      "FieldGroupName": "General Construction Characteristics",
      "FieldPrefix": "3",
      "FieldName": "Powered Axles Position",
      "DisplayOrder": 13,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": true,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }, {
    "FieldGroupName": "Main Dimensions",
    "cocVersionDataFieldCollection": [{
      "DocumentVersionFieldId": 9,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "4",
      "FieldName": "Wheel Base",
      "DisplayOrder": 13,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "454",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 1007,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "4.1",
      "FieldName": "Axle spacing",
      "DisplayOrder": 14,
      "IsMultiElement": true,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 10,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "5",
      "FieldName": "Length",
      "DisplayOrder": 15,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 11,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "6",
      "FieldName": "Width",
      "DisplayOrder": 16,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": null,
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }, {
      "DocumentVersionFieldId": 12,
      "FieldGroupName": "Main Dimensions",
      "FieldPrefix": "7",
      "FieldName": "Height",
      "DisplayOrder": 20,
      "IsMultiElement": false,
      "FieldGroupID": 0,
      "IsMultiRowExist": false,
      "IsMultiLanguage": false,
      "FieldValueCobmination": "15634",
      "IsOptionExists": false,
      "IsSalesVersionExists": false,
      "IsMarketingcodeExists": false,
      "IsMandatoryElementDataMissing": false,
      "IsOverridable": true,
      "varaintData": null
    }]
  }];

 var itemCount = 0;
 var currentItem = 0;

  // now the data binding and rendering is ending    
  $scope.data.forEach(function (data) {
    itemCount += Object.keys(data.cocVersionDataFieldCollection).length;
  });


  $scope.checkLoadingState = function (index) {

    currentItem++;

    if (itemCount === currentItem) {
      $timeout(function () {
        $scope.isLoading = false;
      }, 250);
    }
  }
});