title: Angular 2 Binding Issue on Child Routes
body: <p>I have a small starter project to learn the basics of Angular2 but have a simple issue where I'm sure I must be missing something obvious.</p>
  
  <p>I am using JSPM, ng2 alpha 37, js files in es6 and babel transpile. There is an app container component and 3 other skeleton components which I can successfully route to and see the appropriate html.</p>
  
  <p>On the introduction of a simple string property in anyone of the three components I cannot seem to bind the value in the view, however trying the same code on the parent container component the same structure of code works.</p>
  
  <p>Child Component Example</p>
  
  <pre><code>import { Component, View } from 'angular2/angular2';
  
  @Component({ 
      selector: 'self-employed-calculator' 
  })
  @View({
      templateUrl: 'app/components/self-employed-calculator/self-employed-calculator.html'
  })
  export class SelfEmployedCalculatorComponent {
      constructor() {
          this.test = 'Boom';
          console.log(this.test);
      }
  }
  
  &lt;section class="mui-panel"&gt;
      &lt;p&gt;Self-Employed Calculator&lt;/p&gt;
      &lt;h3&gt;{{ test }}&lt;/h3&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Console log reports the correct value but the rendered html is</p>
  
  <pre><code>&lt;h3 class="ng-binding"&gt; &lt;/h3&gt;
  </code></pre>
  
  <p>Using the same approach on the parent component I get the result I expect</p>
  
  <pre><code>import { Component, View } from 'angular2/angular2';
  import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
  import { HomeComponent } from 'app/components/home/home';
  import { BudgetPlannerComponent } from 'app/components/budget-planner/budget-planner';
  import { SelfEmployedCalculatorComponent } from 'app/components/self-employed-calculator/self-employed-calculator';
  
  @Component({
      selector: 'playground-app'
  })
  @View({
      templateUrl: 'app/components/playground-app/playground-app.html',
      directives: [ROUTER_DIRECTIVES]
  })
  @RouteConfig([
      { path: '/', redirectTo: '/home' },
    { path: '/home', as: 'home', component: HomeComponent },
      { path: '/budget-planner', as: 'budget-planner', component: BudgetPlannerComponent },
      { path: '/self-employed-calculator', as: 'self-employed-calculator', component: SelfEmployedCalculatorComponent }
  
  ])
  export class PlaygroundAppComponent {
      constructor() {
          this.title = 'test';
      }
  }
  
  &lt;header class="mui-appbar mui-z1" style="margin-bottom:20px"&gt;
      &lt;div class="mui-container mui-appbar-line-height"&gt;
          &lt;span&gt;
              &lt;a [router-link]="['/home']" class="mui-text-title mui-text-white"&gt;Angular 2 Playground&lt;/a&gt;
          &lt;/span&gt;
          &lt;nav class="mui-text-white mui-pull-right"&gt;
              &lt;div class="mui-dropdown"&gt;
                  &lt;button class="mui-btn" data-mui-color="accent" data-mui-toggle="dropdown"&gt;
                      Components
                      &lt;span class="mui-caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="mui-dropdown-menu"&gt;
                      &lt;li&gt;&lt;a [router-link]="['/self-employed-calculator']"&gt;Self-Employed Calculator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a [router-link]="['/budget-planner']"&gt;Budget Planner&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;main class="mui-container"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;h3&gt;{{ title }}&lt;/h3&gt;
      &lt;footer&gt;
          &amp;copy; My Footer
      &lt;/footer&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>I see the expected result</p>
  
  <pre><code>&lt;h3 class="ng-binding"&gt;test&lt;/h3&gt;
  </code></pre>
  
  <p><a href="https://github.com/StepChangeCharity/angular2-playground/tree/ca14b3d305a054b265ff70df181d1fa08eca3741" rel="nofollow">Git Source</a></p>