Связывания внутри ng-repeat во вложенных компонентах не связываются должным образом?

Question

У меня есть иерархический набор компонентов AngularJS, которые представляют таблицу, ее строки и ячейки в каждой строке.

Я создал объект класса таблицы, который имеет коллекцию строк, икласс строки, который имеет коллекцию ячеек и объект ячейки. Ссылки на эти объекты связаны с компонентами, которые отображают их на странице.

Моя проблема в том, что я не могу заставить экземпляр класса строки правильно связываться с компонентом строки. Строки созданы правильно и доступны в компоненте таблицы. Я использую ng-repeat для итерации коллекции строк, чтобы я мог связать экземпляр строки (DetailRow) с каждым компонентом строки (detail-row), но, хотя я могу получить доступ к объекту каждой строки внутри ng-repeat, я не могу показатьсяпередать экземпляр DetailRow атрибуту rowitem, с которым связывается компонент detail-row. Я пробовал как <detail-row rowitem="myRow">, так и <detail-row rowitem="$ctrl.myRow">, но ни одна не работала.

HTML-шаблоны для компонентов и определения компонентов и контроллеров приведены ниже:

var budgetDetailsTemplate= `
    <div id="details-table"> 
      <div id="budget-details-header">             
        <div class="back-link">Budget Changes</div>
        <div class="name">>  {{$ctrl.account.name.trim()}}</div>
        <div class="spacer"></div>
        <div id="budget" class="cell">   
          <div class="cell-header">Current Budget:</div>
          <div class="cell-content">{{$ctrl.formatCurrency($ctrl.account.budget)}}</div>
        </div>
        <div id="changes" class="cell">   
          <div class="cell-header">Changes:</div>
          <div class="cell-content">{{$ctrl.formatCurrency($ctrl.changes)}}</div>
        </div>
        <div id="changes" class="cell">   
          <div class="cell-header">New Budget</div>
          <div class="cell-content">{{$ctrl.formatCurrency($ctrl.changes)}}</div>
        </div>
      </div>
      <div><detail-table account="$ctrl.account"></detail-table></div>
`;

var detailTableTemplate = `
    <div>Name: {{account.name}}</div>
    <div id="detail-rows">
      <div id="detail-table">
        <div class="row" ng-repeat="myRow in $ctrl.tableRows()">
          <div>test:  {{myRow.guid}}</div>   [<---This works as expected]
          <detail-row rowitem="myRow"></detail-row> [<---this doesnt pass to the controller]
        </div>     
      </div>
    </div>
`;

var detailRowTemplate = `
    <detail-cell cell="$ctrl.getCell(DESC)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(QUANT)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(UNITS)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(RATE)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(SUBT)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(X)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(TAXR)"></detail-cell>
    <detail-cell cell="$ctrl.getCell(TOT)"></detail-cell>
`;

var detailCellTemplate= `
    <span class="detail-cell" id="{{$ctrl.guid}}">{{$ctrl.cellContents()}}</span>
`;

контроллеры и определения компонентов:

function budgetDetailsPageController($scope, $timeout, $rootScope, $http, $window, $uibModal) {
    var ctrl = this;
    ctrl.account = this.account;
    ctrl.changes = 150;
    ctrl.test = function() {

        alertMessage("budget details controller:  account: " + ctrl.account.name);
    };
    ctrl.formatCurrency = function(value) {
        return formatCurrency(value);
    }
}

app.component("budgetDetails", {
    template: budgetDetailsTemplate,
    controller: budgetDetailsPageController,
    bindings: {
        account: '='
    }
});

function detailTableController($scope, $timeout) {
    var ctrl=this;
    ctrl.foo = "I am detailTableController";
    ctrl.table = new BudgetDetails();
    ctrl.account = this.account;
    ctrl.currentRow = ctrl.table.appendRow();
    ctrl.table.appendRow();
    ctrl.tableRows =  function () {
        return ctrl.table.getRows();
    };
    ctrl.rowCount = ctrl.table.count;
}

app.component("detailTable",  {
    template: detailTableTemplate,
    controller: detailTableController,
    bindings: {
        account: '='
    }
});

function detailRowController($scope, $timeout) {
    var ctrl=this;   
    ctrl.foo = "I am detailRowController";
    ctrl.myRow = this.rowitem;
    if (ctrl.myRow===undefined) {
        console.log("myRow is undefined");
    }

    ctrl.getCell = function(index) {
       return ctrl.myRow.getCell(index);
    }
}

app.component("detailRow",  {
    template: detailRowTemplate,
    controller: detailRowController,
    bindings: {
        rowitem: '='
    }
});

function detailCellController($scope, $timeout) {
    var ctrl=this;
    ctrl.cell=this.cell;
    if (ctrl.cell===undefined) {
        console.log("cell is undefined");
    }

    ctrl.cellContents = function() {
        if (ctrl.cell) {
            return cell.valueString;
        } else {
            return "undefined cell";
        }
    }    
}

app.component("detailCell",  {
    template: detailCellTemplate,
    controller: detailCellController,
    bindings: {
        cell: '='
    }
});