Binding in Component Router - Angular 1.5
<p>I'm struggling with binding in Component Router. </p>

<p>It is said in the Developer's Guide you should avoid using $scope in components therefore objects have to be passed through binding.</p>

<p>Based on examples in:
<a href="https://docs.angularjs.org/guide/component" rel="nofollow">https://docs.angularjs.org/guide/component</a> and <a href="https://docs.angularjs.org/guide/component-router" rel="nofollow">https://docs.angularjs.org/guide/component-router</a> I came up with:</p>

<p>HTML:</p>

<pre><code>&lt;div ng-app="app" ng-controller="MainCtrl as ctrl"&gt;
    {{ ctrl.hero.name }}
    &lt;app&gt;&lt;/app&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>'use strict';

var app = angular.module('app', [
    'ngComponentRouter',
    'testComponent',
])

.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
})

.value('$routerRootComponent', 'app')

.controller('MainCtrl', function(){
    this.hero = {
        name: 'Spawn'
    };
})

.component('app', {
    template: '&lt;ng-outlet&gt;&lt;/ng-outlet&gt;',
    $routeConfig: [
        {path: '/test', name: 'Test', component: 'testComponent'},
    ],
})

var testComponent = angular.module('testComponent', []);

testComponent.component('testComponent', {
    template: '&lt;span&gt;Name: {{$ctrl.hero.name}}&lt;/span&gt;',
    controller: TestComponentController,
    bindings: {
        hero: '=',
    }
});

function TestComponentController() {
}
</code></pre>

<p>But <code>&lt;span&gt;Name: {{$ctrl.hero.name}}&lt;/span&gt;</code> doesn't show "Spawn" or anything.</p>