AngularJS read data from controller to table

I simply try to read out data from the balanceTableCtr and show it in the balanceTable. But it just shows me an empty table.

balanceTableCtr.js:

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.dashboard')
        .controller('BalanceTableCtrl', BalanceTableCtrl);

    /** @ngInject */
    function BalanceTableCtrl($scope) {
        $scope.balanceTableData = [
            {
              image: 'app/browsers/chrome.svg',
              algorithm: 'SHA-256',
              name: 'Bitcoin',
              price: '9843 $',
              change: '12.6 %',
              isChangeUp: true,
              amount: '2.452 BTC'
            }
          ];
    }
})();

balanceTable.directive.js:

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard')
      .directive('balanceTable', balanceTable);

  /** @ngInject */
  function balanceTable() {
    return {
      restrict: 'E',
      controller: 'BalanceTableCtrl',
      templateUrl: 'app/pages/dashboard/balanceTable/balanceTable.html'
    };
  }
})();

balanceTable.html:

<div class="horizontal-scroll">
  <table class="table table-hover">
    <thead>
    <tr class="black-muted-bg">
      <th class="align-right">Algorithm</th>
      <th class="align-right">Name</th>
      <th class="align-right">Price</th>
      <th class="align-right">Change 24h</th>
      <th class="align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in balanceTableData" class="no-top-border">
      <td class="align-right">{{item.algorithm}}</td>
      <td class="align-right">{{item.name}}</td>
      <td class="align-right">{{item.price}}</td>
      <td class="align-right">{{item.change}}</td>
      <td class="align-right">{{item.amount}}</td>
    </tr>
    </tbody>
  </table>
</div>

dashboard.html:

<div class="row">
  <div class="col-lg-6 col-md-12">
    <div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
      <div include-with-scope="app/pages/dashboard/balanceTable/balanceTable.html"></div>
    </div>
  </div>
</div>

I'm very new to Angular 1. But I looked in the Internet all around and they all do it that way. Why is it not working?

Check this plunkr

<div class="row">
<div class="col-lg-6 col-md-12">
  <div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
    <balance-table> </balance-table> 
  </div>
</div>