Using expression `("&")` binding to pass data from AngularJS component to parent scope
<h3>Can't access controller scope from angular component output binding function</h3>
<p>I'm trying to access my home controller scope from dashboard <a href="https://docs.angularjs.org/guide/component" rel="noreferrer">component</a> but it's undefined.</p>
<p>I also tried a second approach but then my function variable is undefined.</p>
<p>I'm using Angular 1.5 with Typescript</p>
<p><em><strong>FIRST APPROACH:</strong></em></p>
<p>Home controller HTML:</p>
<pre><code>&lt;div class=&quot;home-container&quot;&gt;
    &lt;dashboard-component on-tile-type-changed=&quot;HomeCtrl.onTileTypeChanged&quot;&gt;
    &lt;/dashboard-component&gt;
&lt;/div&gt;
</code></pre>
<p>Home controller js:</p>
<pre><code>namespace app.dashboard {
    'use strict';

    class HomeController {
        static $inject:Array&lt;string&gt; = ['$window'];

        constructor(private $window:ng.IWindowService) {

        }

        private onTileTypeChanged(tile:ITile) {
            console.log(tile); // DEFINED AND WORKING
            console.log(this); // NOT DEFINED
        }
    }

    angular
        .module('app.dashboard')
        .controller('HomeController', HomeController);
}
</code></pre>
<p>Dashboard controller js:</p>
<pre><code>angular.module('app.dashboard')
    .component('dashboardComponent', {
        templateUrl: 'app/dashboard/directives/dashboard-container.html',
        controller: DashboardComponent,
        controllerAs: 'DashboardCtrl',
        bindings: {
            onTileTypeChanged: &quot;&amp;&quot;
        }
    });

this.onTileTypeChanged()(tile);
</code></pre>
<p><em><strong>SECOND APPROACH:</strong></em></p>
<p>Home controller HTML:</p>
<pre><code>&lt;div class=&quot;home-container&quot;&gt;
    &lt;dashboard-component on-tile-type-changed=&quot;HomeCtrl.onTileTypeChanged()&quot;&gt;
    &lt;/dashboard-component&gt;
&lt;/div&gt;
</code></pre>
<p>Dashboard controller js:</p>
<pre><code>this.onTileTypeChanged(tile);
</code></pre>
<p>And here I'm getting the opposite:</p>
<pre><code>private onTileTypeChanged(tile:ITile) {
    console.log(tile); // NOT DEFINED
    console.log(this); // DEFINED AND WORKING
}
</code></pre>