title: Using & bindings in nested AngularJS directives
body: <p>I'm trying to bind to <code>ng-change</code> on an element created by a directive up through two other directives that wrap it to a method on the controller using <code>&amp;</code> bindings in an isolate scope, but I can't figure out how to get arguments to pass all the way through. Here's a <a href="http://plnkr.co/edit/zcMM6FlIshy4lFohCvz9" rel="nofollow">plunk</a> that demonstrates the problem.</p>
  
  <p>In short, I have an HTML structure like this:</p>
  
  <pre><code>&lt;body ng-app="ExampleApp"&gt;
    &lt;div ng-controller="Controller"&gt;
      &lt;button ng-click="doSomething('Called directly')"&gt;Call Function Directly&lt;/button&gt;
      &lt;br /&gt;
      &lt;outer on-outer-model-changed="doSomething('Called from Outer in HTML')"&gt;&lt;/outer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The controller:</p>
  
  <pre><code>var app = angular.module('ExampleApp', []);
  app.controller('Controller', ['$scope',
    function($scope) {
      $scope.doSomething = function(one, two, three) {
        console.log(arguments);
      };
    }
  ]);
  </code></pre>
  
  <p>The <code>outer</code> directive:</p>
  
  <pre><code>app.directive('outer', function($compile) {
    return {
      restrict: 'E',
      scope: {
        outerModelChanged: '&amp;onOuterModelChanged'
      },
      link: function(scope, element, attrs) {
        var innerElement = angular.element('&lt;inner&gt;&lt;/inner&gt;');
        innerElement.attr('on-inner-model-changed', 'outerModelChanged(\'Called from Outer\')');
        element.after(innerElement);
        $compile(innerElement)(scope);
        console.log(arguments);
      }
    }
  });
  </code></pre>
  
  <p>And the <code>inner</code> directive that the <code>outer</code> directive creates:</p>
  
  <pre><code>app.directive('inner', function() {
    return {
      scope: {
        innerModelChanged: '&amp;onInnerModelChanged'
      },
      restrict: 'E',
      template: '&lt;button ng-click="innerModelChanged(\'Called from Inner\')"&gt;Call from Inner&lt;/button&gt;'
    }
  });
  </code></pre>
  
  <p>I understand that I'm getting the output <code>["Called from Outer in HTML"]</code> because this is hardcoded into the <code>&lt;outer&gt;</code> tag. What I don't understand is how to pass arguments all the way up from the <code>inner</code> directive.</p>