title: AngularJS ES6 parent function not being called by child component
body: <p>I'm a bit new to the ES6 syntax/structure of Angular 1.x, and I'm running into an issue with passing a function from a parent controller to a child controller.</p>
  
  <p>This is how the app is tied together (I use webpack + babel with this as the entry-point):</p>
  
  <pre><code>const requires = [
      'ngRoute',
  ];
  
  //App
  angular.module('kanban',requires)
      .controller('dashboardCtrl', dashboardCtrl)
      .component('board', board)
      .component('task', task)
      .config(routes);
  </code></pre>
  
  <p>In my routes, I have a single route, which is my 'parent'</p>
  
  <pre><code>export default function($routeProvider) {
      $routeProvider
          .when('/', {
              template: dashboardTemplate,
              controller: 'dashboardCtrl',
              controllerAs: '$ctrl',
          });
  }
  </code></pre>
  
  <p>Who's controller looks like this:</p>
  
  <pre><code>export default function($rootScope) {
      $rootScope.title = 'Kanban';
      let _this = this;
  
      this.boards = [
          {
              _id: 'b1',
              title: 'backlog',
              tasks: ['t1', 't2'],
          }
      ];
  
      this.deleteBoard = function(board) {
          console.log(board);
          let index = _this.boards.indexOf(board);
          if (index !== -1) {
              _this.boards.splice(index, 1);
          }
      };
  </code></pre>
  
  <p>And in the template, the child is created with ng-repeat, passing in the function</p>
  
  <pre><code>&lt;board ng-repeat="board in $ctrl.boards" board="board" onDelete="$ctrl.deleteBoard(board)" &gt;&lt;/board&gt;
  </code></pre>
  
  <p>And the board binds the attribute as a function with an &amp;</p>
  
  <pre><code>export const board = {
      template: boardTemplate,
      controller: boardCtrl,
      bindings: {
          board: '=',
          onDelete: '&amp;',
      }
  };
  </code></pre>
  
  <p>And the function is added to the controller within a different function:</p>
  
  <pre><code>export default function boardCtrl() {
      let _this = this;
  
      this.deleteBoard = function(){
          console.log(_this.onDelete);
          _this.onDelete({board: _this.board});
      };
  }
  </code></pre>
  
  <p>And called with a click:</p>
  
  <pre><code>&lt;button ng-click="$ctrl.deleteBoard()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I can reach the board (child) controller's function, which prints this in the console:</p>
  
  <pre><code>function (locals) {
      return parentGet(scope, locals);
  }
  </code></pre>
  
  <p>And returns no errors, but the console.log in the parent deleteBoard function does not get called.</p>
  
  <p>What is happening here? Why does the child seem to recognize that it is calling something in the parent scope, but is not reaching it?</p>