The '&' in Angular 1.5 Components
<p>For a project I am working on, we've refactored some repetitive views and code out into Angular 1.5 components.</p>

<p>These components specifically open an Angular UI modal, which when the modal is closed, should perform some callback on the uppermost scope.  The problem we are encountering, is that when we close our modal, the function we set as a callback does not get called.</p>

<p>I made sure to consult the <a href="https://docs.angularjs.org/guide/component" rel="nofollow">Angular 1.5 Documentation for Components</a>, but the part about how the '&amp;' classifier works is particularly vague.  I quote:</p>

<blockquote>
  <p>Outputs are realized with &amp; bindings, which function as callbacks to component events.</p>
</blockquote>

<p>I found this passage next to useless; as a result I do not know that I am using the '&amp;' binding classifier correctly, in this case.  Here's what I've got going on:</p>

<p><em>MainFeature.html</em></p>

<pre><code>&lt;div ng-repeat="thing in vm.things"&gt;
    &lt;sub-feature onSave="vm.onSave()" thing="thing"&gt;&lt;/sub-feature&gt;
&lt;/div&gt;
</code></pre>

<p><em>MainFeatureCtrl.js</em></p>

<pre><code>(function () {
    'use strict';

    angular.module('app').controller('mainFeatureCtrl', [
        mainFeatureCtrl
    ]);

    function mainFeatureCtrl() {
        var vm = this;

        vm.onSave = function () {
            // Save stuff
            console.log('I should see this but do not.');
        };
    }
})();
</code></pre>

<p><em>SubFeatureCmpt.js</em></p>

<pre><code>(function () {
    'use strict';

    angular.module('app').component('subFeature', {
        templateUrl: 'App/MainFeature/SubFeature/SubFeature.html',
        controller: 'subFeatureCtrl',
        controllerAs: 'vm',
        bindings: {
            thing: '=',
            onSave: '&amp;'  // Point of contention - expression?
        }
    });
})();
</code></pre>

<p><em>SubFeature.html</em></p>

<pre><code>&lt;span ng-click="vm.edit()"&gt;{{vm.thing}}&lt;/span&gt;
</code></pre>

<p><em>SubFeatureCtrl.js</em></p>

<pre><code>(function () {
    'use strict';

    // subFeatureModalSvc is merely a service that lets me open
    // an Angular UI modal.  It is not necessary to include that
    // code for the purposes of my question.
    angular.module('app').controller('subFeatureCtrl', [
        'subFeatureModalSvc', subFeatureCtrl
    ]);

    function subFeatureCtrl(subFeatureModalSvc) {
        var vm = this;

        vm.edit = function () {
            subFeatureModalSvc.edit(vm.thing)
                .then(function () {
                    console.log('I do see this');
                    // This line is the problem line.
                    // I've verified that it's defined, and a function...
                    // The problem is it's not a callback to vm.onSave 
                    // as defined up in mainFeature.js!
                    vm.onSave();
                });
        };
    }
})();
</code></pre>

<p>This code currently yields the following output upon 'confirming' the modal dialog:</p>

<pre><code>I see this.
</code></pre>

<p><strong>Question:</strong>: Twofold.  First, am I using the '&amp;' bindings classifier correctly, to set up an event for my Sub-Feature component?  Secondly, in its current state (this one), it is not working - I do not know how to get it working.  What should I do to ensure that, when I close the modal, that I see the following output:</p>

<pre><code>I see this
I should see this but do not
</code></pre>