title: Angular Directive bind function with & not passing arguments to controller
body: <p>I have a directive which interacts with <a href="https://box-content.readme.io/docs/the-box-file-picker" rel="noreferrer">Box file picker</a>. My directive is used by 2 separate controllers, with the possibility of adding more in the future. </p>
  
  <p>Box file picker lets you set a callback function once the user selects a file/folder, like this:</p>
  
  <pre><code>var boxSelect = new BoxSelect();
  // Register a success callback handler
  boxSelect.success(function(response) {
      console.log(response);
  });
  </code></pre>
  
  <p>My controllers are using the directive and they have the success callback logic as scope variables, which I'm passing to the directive.</p>
  
  <p>I created a <a href="http://plnkr.co/edit/V8n08KDEK5Ex2VvvvAPq?p=preview" rel="noreferrer">plunkr</a> where I'm mocking the Box select behavior </p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>.controller('myController', function($scope) {
    $scope.onSuccessful = function(message) {
      alert('Success! Message: ' + message);
    };
  })
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>angular.module('myApp', [])
    .controller('myController', function($scope) {
      $scope.onSuccessful = function(message) {
        //message is undefined here
        alert('Success! Message: ' + message);
      };
    })
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        scope: {
          success: '&amp;'
        },
        link: function(scope, element) {
  
          //third party allows to subscribe to success and failure functions
          function ThirdPartySelect() {
  
          }
  
          ThirdPartySelect.prototype.success = function(callback) {
            this.callback = callback;
  
          };
  
          ThirdPartySelect.prototype.fireSuccess = function() {
            this.callback({
              foo: 'bar'
            });
          };
  
          var myThirdPartyInstance = new ThirdPartySelect();
          myThirdPartyInstance.success(function(message) {
            //message is still defined here, but not in the controller
            scope.success(message);
          });
  
          element.on('click', function() {
            myThirdPartyInstance.fireSuccess();
          });
  
        }
      };
    });
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div ng-controller="myController"&gt;
    &lt;button my-directive success="onSuccessful(arg)"&gt;Test&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The callback function gets called inside the controller but the arguments
   are undefined. </p>
  
  <p>I was able to fix this by using '=' instead of '&amp;', but I'd like to know why it wasn't working with '&amp;' since it is supposed to be used for <a href="https://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope">method binding</a></p>