title: What is the best way to pass functions between inner components in AngularJS 1.5?
body: <p>I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&amp;' bindings? </p>
  
  <p>Here's an use case:</p>
  
  <pre><code>angular.module('app', []).component('app', {
    controller: class AppController {
      doSomething (data) {}
    },
    template: `
      &lt;sub-component on-do-something="$ctrl.doSomething(data)"&gt;
      &lt;/sub-component&gt;
    `
  })
  </code></pre>
  
  <p>ps: I'm using ngRedux, so such scenario is very common</p>
  
  <p>EDIT:</p>
  
  <p>The problem is: for the code above to work, each inner component controller would look like this:</p>
  
  <pre><code>.component('subComponent', {
      bindings: {
          doSomething: '&amp;'
      },
      controller: function SubComponentController () {
          this._doSomething = param =&gt; this.doSomething({data: param});
      },
      template: `
          &lt;inner-component do-something="$ctrl._doSomething(data)"&gt;
          &lt;/inner-component&gt;
      `
  });
  
  .component('innerComponent', {
      bindings: {
          doSomething: '&amp;'
      },
      controller: function InnerComponentController () {
          this._doSomething = param =&gt; this.doSomething({data: param});
      },
      template: `
          &lt;sub-inner-component do-something="$ctrl._doSomething(data)"&gt;
          &lt;/sub-inner-component&gt;
      `
  });
  </code></pre>
  
  <p>And then I'd have to pass down <code>_doSomething</code> instead of <code>doSomething</code> directly. </p>
  
  <p>ps: I'm not using transclusion here </p>