Having trouble with dynamic datatable columns + Angular

Webix JS
1

Hi!
My goal is to be able to dynamically supply the column definitions and data in JSON format from my RESTful service on the backend. My front-end is Angular + Webix.

I have a working prototype using Webix without Angular calling the same backend service with the $$(‘datatable’).load(url) method. The service serves up JSON that looks something like this:

{"config":{"columns":[{"id":"Reference","header":[{"text":"Reference"}]}]},data:[{"Reference":"value123"}]}

I’ve hand-edited that because my real data can’t be shared, but suffice to say it’s definitely well-formed and it works with the Webix Datatable in the non-Angular context - I have a button that calls $$(‘datatable’).load(‘localhost/myserviceurl’) and the columns and headers get created and the data is rendered as expected. There’s also a service endpoint that returns just the data as an array of JSON objects (more on that later).

In the Webix+Angular context, I have a function defined in $scope that calls the same $$(‘datatable’).load(url) method, and a button using the ng-click directive to call that function. When I click the button the datatable headers get created, but the rows don’t render even though by inspecting $$(‘datatable’).data through the browser’s dev console, I can see that the data is contained within the object. That’s the what I want to fix: I want to be able to get column config and data both from the server, and render to the webix datatable.

I’ve also tried setting autoConfig to true on the datatable, but then nothing renders at all.
And I’ve defined the columns statically in the Angular view, and then populated the data from my data-only service endpoint, and it renders correctly when I do that. But it’s because I know my test data that I’m able to do that, in my use case the columns are completely unknown at design time.

Here’s the relevant part of my View:

<button ng-click="loadLeftTable('/web/api/rec/webixdetails?recId=123')">Load Data</button>
  <div id="detailsGrids" class="detailsGrids">
    <div class="details-grid-container">
      <span class="details-file-name"><strong>Left File:</strong>&nbsp; {{leftFileName}} </span>
        <div webix-ui view="scrollview" height="200" width="600" scroll="xy">
            <div view="datatable" id="leftTable" webix-data="leftTableRows" datatype="json"> <!-- I've done this with and without the webix-data directive, much like the load method, it only works to render statically-defined columns -->
                <!--div view="column" id="Reference">Reference</div> commented out - when I did this the Reference column rendered with data-->
            </div>
        </div>
    </div>

Here’s the related controller script:

$scope.leftTableRows = [{"Reference":"I replaced the actual data with this"}];

$scope.loadLeftTable = function(dataUrl){
      $$('leftTable').load(dataUrl);
  };

I inherited the Angular portion, which originally worked with ng-grid for the table presentation, so there shouldn’t be anything fundamentally wrong with the Angular part of the application. It’s just some part of the Angular/Webix dynamic column loading situation breaks the rendering for the rows (but not the headers).