angular handsontable not working with regular scope variable

Question

I have and angular scope variable called xd which i am trying to display in a table. When i use a regular table, it works fine:

<table class="table">
  <tr ng-repeat="x in xd">
    <th ng-bind="x.title"/>
  </tr>
</table>

Now i am trying to use ngHandsonTable for the same purpose. As the documentation is still not proper, i tried something like this but somehow it is not showing anything. How do i use it to function properly?

<hot-table id="previewTable" columnHeaders="false" settings="htSettings" datarows="xd" >
</hot-table>

sample dataset of xd:

[
  {
    "title": "mytitle1"
  }
  {
    "title": "mytitle2"
  }
  {
    "title": "mytitle3"
  }
]

Another output of xd:

[
  {
    "primary": "2",
    "title": "mytitle1"
  }
  {
    "primary": "3",
    "title": "mytitle2"
  }
  {
    "primary": "4",
    "title": "mytitle3"
  }
]

I would like to dynamically assign these column headers and values in the <hot-table>

Answer 1

After fiddling around with this, I came up with:

HTML table:

<div ng-app="demoApp" ng-controller="demoCtrl">
  <hot-table
    id="demoTable"
    datarows="xd"
    settings="{
      colHeaders: xdColumns
    }">
  </hot-table>
</div>

Where the columns are the attribute names:

$scope.xdColumns = Object.keys($scope.xd[0]);

See this fiddle: https://jsfiddle.net/hysx1g10/4/

Since your data looks kind of confusing (every item has a title attribute), I'm not sure if that's what you're looking for. But as in a regular table you got one member (of the xd array) per row.