How to use embed Angular UiGrid in AngularJs Component

I try to embed a ui-grid in a component, and the embedded ui-grid doesnt render

I built a Plnkr to visualize the problem.

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <scripts> ... </script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
      DataGrid in HTML
      <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
      <h1>Template/ Component</h1>
      <hero-detail hero="$ctrl.hero" myData="$ctrl.myData"}"</hero-detail>
    </div>
    
    <script src="app.js"></script>
  </body>
</html>

app.js

angular.module('app', ['ngTouch', 'ui.grid'])
  .controller('MainCtrl', MainCtrl)
  .component('heroDetail', {
  template: `
      <div>
        DataGrid in Template
        <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
        <span>Name: {{$ctrl.hero.name}}</span>
        
      </div>
  `,
  bindings: {
    hero: '=',
    myData: '='
  }
});

function MainCtrl() {
  this.hero = {name: 'Spawn'};
  this.myData = [
    {
        firstName: "Cox",
        lastName: "Carney",
        company: "Enormo",
        employed: true
    },
    ...
  ];
}

Do you have an idea how to arrive at a workable solution?

Thanks for your input!

Solution

Looking at this github, all camelCase bindings in the component are translated to kabab-case in the html. So your component reference in the index.html needs to be changed from

<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"></hero-detail>

into

<hero-detail hero="$ctrl.hero" my-data="$ctrl.myData"></hero-detail>

Also, a side note, you have a typo where ="$ctrl.myData"}"</hero-detail> needs to be changed to ="$ctrl.myData"></hero-detail>