Angular2 - Two way data binding with nested component

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Component - Inputs</title>
    <!-- 1. Load libraries -->
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <rio-app>Loading...</rio-app>
    
    <script>
      System.import('main');
    </script>
  </body>

</html>

var angularVersion = '2.0.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/forms': 'unpkg:@angular/forms@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'unpkg:rxjs@5.0.0-beta.12',
    'zone.js': 'unpkg:zone.js@0.6.25',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
    "crypto": "@empty",
    "main": "main.ts"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts'
    }
  }
});

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { Component } from '@angular/core';

@Component({
  selector: 'rio-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  helloName: string;

  constructor() {
    this.helloName = 'Angular2';
  }
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rio-hello',
  template: `
  <input [(ngModel)]="name" (ngModelChange)="nameChange.emit($event)">
  <p>{{name}}</p>
  `,
})
export class HelloComponent {
  @Input() name: string;
  @Output()
  nameChange:EventEmitter<string> = new EventEmitter();
}

<div>
  <p>Hello {{helloName}}, outside</p>
  <rio-hello [(name)]="helloName"></rio-hello>
</div>

import { NgModule } '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [
    AppComponent,
    HelloComponent
  ],
  exports: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}