AngularJS - Children component binded value not refreshed in ng-repeat

Question

I have a parent component "transactionList" which get a list of banking transactions from an API and a children component "transactionItem" repeated for each transaction in this list.

I encountered an issue when refreshing this list of transactions binded to the parent component controller instance: the data are logged in my console but my table is empty. Note that the issue is related to children component because the commented code works fine.

Parent:

.component('transactionList', {
  templateUrl: '/static/budget/transaction-list.html',
  controller: 'TransactionListController',
  bindings: {
  },
})

.controller('TransactionListController', ['Transaction', function(Transaction) {
  var ctrl = this;
  ctrl.loadTransactions = function() {
    ctrl.transactions = Transaction.query(function() {
      angular.forEach(ctrl.transactions, function(transaction) {
        transaction.selected = false;
      }); 
      console.log(ctrl.transactions);
    }); 
  };  
  ctrl.loadTransactions();
}])

<table class="table table-hover">
  <thead>
    <tr>
      <th>Date</th>
      <th>Category</th>
      <th>Amount</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="transaction in $ctrl.transactions">
      <!--
      <td>{{transaction.date}}</td>
      <td>{{transaction.category}}</td>
      <td>{{transaction.amount}}</td>
      <td>{{transaction.description}}</td>
      -->
      <transaction-item transaction="transaction"></transaction-item>
    </tr>
  </tbody>
</table>

Children:

.component('transactionItem', {
  templateUrl: '/static/budget/transaction-item.html',
  controller: 'TransactionItemController',
  bindings: {
    transaction: '=',
  },
})

.controller('TransactionItemController', function() {
  var ctrl = this;
  console.log(ctrl.transaction);
})

<td>{{$ctrl.transaction.date}}</td>
<td>{{$ctrl.transaction.category}}</td>
<td>{{$ctrl.transaction.amount}}</td>
<td>{{$ctrl.transaction.description}}</td>

EDIT:

If I put static string in children template, it will be displayed out of the table. As mentioned by @JB Nizet in comments, it is probably because of the DOM is violated. How manage table rows with a children component in AngularJS?

EDIT2:

It seems I have no other choice that using a directive as an attribute to respect the DOM. https://github.com/angular/angular.js/issues/14466