ngHandsontable: async loading of datasource and binding not working with Angular

I have a handsontable where I load the data asynchronously, which I simulate with a delay of 3 seconds in my example.

This is the table, which settings="ctrl.settings":

  <hot-table col-headers="true" settings="ctrl.settings">
    <hot-column data="id" title="'ID'" read-only></hot-column>
    <hot-column data="name.first" title="'First Name'"></hot-column>
    <hot-column data="name.last" title="'Last Name'"></hot-column>
    <hot-column data="address" title="'Address'"></hot-column>
    <hot-column data="price" title="'Price'" type="'numeric'" format="'$ 0,0.00'"></hot-column>
    <hot-column data="isActive" title="'Is Active'" type="'checkbox'" checked-template="'Yes'" unchecked-template="'No'"></hot-column>
  </hot-table>

and the controller like this, where you can see that I set the data source like this data: _this.delayedData,:

function MainCtrl(dataFactory) {
  var _this = this;  
  _this.data = dataFactory.generateArrayOfObjects();  
  _this.delayedData = []; // this will be filled with a delay

  this.settings = {
    // data: _this.data,
    data: _this.delayedData,
    dataSchema: this.data
  }
  this.columns = [
    {
      data: 'id',
      title: 'ID',
      readOnly: true
    },
    {
      data: 'price',
      title: 'Price',
      readOnly: false
    }
  ];


  // here the data is loaded with a delay of 3 seconds
  // and the table is then rendered again 
  setTimeout(function(){ 
      _this.delayedData = _this.data; 
      console.log('Setting delayed values ' + JSON.stringify(_this.delayedData));    

      // get instance of table and re-render
      var hotDiv = angular.element($('hot-table'));
      if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {
          var hotInstance = hotDiv.isolateScope().hotInstance;
          if (hotInstance!==undefined) {
              hotInstance.render();
              console.log("=========================");
              console.log('Rendered but not showing in the table! Why?');
              console.log("========================="); 
          }
      }    

  }, 3000);

}

JS Bin: http://jsbin.com/daniyov/edit?html,js,console,output

So the data is being loaded a bit delayed after the table has been defined in the controller. According to the handsontable documentation, the render() method of the table should be called whenever the data changes, like in this example of the documentation.

I do see the "Render!" output in the console, so this code does get called, however, the items don't show up in the table.

A similar example that I created, but without Angular / Angular directive, works fine this way: http://jsfiddle.net/mathiasconradt/L4z5pbgb/ Just with Angular / ngHandsontable, I cannot get it to work.

===== UPDATE =====

I updated my sample at JS Bin: http://jsbin.com/daniyov/edit?html,js,console,output and did some more debugging. I updated the function where I simulate the delayed loading of the data source as follows:

  // here the data is loaded with a delay of 3 seconds
  // and the table is then rendered again 
  setTimeout(function(){ 
      _this.delayedData = _this.data; // assigning data here!

      // get instance of table and re-render
      var hotDiv = angular.element($('hot-table'));

      if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {

          console.log("=========================");
          console.log('DEBUG OUTPUT');
          console.log("=========================");
          console.log('Found table DOM element: ' + hotDiv.attr("id"));

          var hotInstance = hotDiv.isolateScope().hotInstance;
          if (hotInstance!==undefined) {

              // let's see if the reference
              console.log('Columns in this table: ' + hotInstance.countCols());
              console.log('Rows in this table: ' + hotInstance.countRows());

              console.log('Table source data length: ' + hotInstance.getSourceData().length);
              console.log('delayedData length: ' + _this.delayedData.length); 

              console.log("=========================");
              console.log('Why does delayedData have a length of ' + _this.delayedData.length);
              console.log('and the table source data a length of ' + hotInstance.getSourceData().length);
              console.log('if it IS the data source of the table?');
              console.log("=========================");    

              hotInstance.render(); 
          }
      }    

  }, 3000);

It seems that the data source that I assign to my table does not really hold a reference to the object I assign.

The two log outputs show different values:

// this has value 10:
console.log('Table source data length: ' + hotInstance.getSourceData().length);

// this has value 0:
console.log('delayedData length: ' + _this.delayedData.length);

even though _this.delayedData is the data source of my table, and from my understanding it's bound by reference, set via:

this.settings = {
  data: _this.delayedData
}

Solution

I found a workaround by updating the settings again like this before re-rendering the table, but I don't understand why this would be needed. There should be a reference to _this.delayedData at all time by the table.

          // THIS IS THE WORKAROUND I NOW FOUND. I JUST ASSIGN THE DATA SOURCE
          // AGAIN, BUT WHY IS THAT NEEDED?
          hotInstance.updateSettings({
              data: _this.delayedData,
          });

          hotInstance.render();

Looks like a bug to me, reported at https://github.com/handsontable/ngHandsontable/issues/180