Bind Select DropDown List in AngularJS 2

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
  <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

  <!-- Angular polyfill required everywhere -->
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>

  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>

  
   <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {
          'api': {defaultExtension: 'ts'}, 
          'app': {defaultExtension: 'ts'} 
        } 
      });
    System.import('app/main')
          .then(null, console.error.bind(console));
  </script>
    </head>

  <body>
    <h1>Angular 2 Bind select list demo!</h1>
    <my-country-list>Loading....</my-country-list>
    </body>
</html>

/* Styles go here */

h1 {
  font-family:Arial;
}

export class Country {
  constructor(public id: number, public name: string) { }
}

  import { bootstrap } from 'angular2/platform/browser';
  import { CountryListComponent } from './countrylistcomponent';

  bootstrap(CountryListComponent)
    .then(success => console.log(`Bootstrap success`))
    .catch(error => console.log(error));

import { Component, OnInit } from 'angular2/core';
import { Country } from './country';

@Component({
  selector: 'my-country-list',
  templateUrl: 'app/countrylistcomponent.html',
  styles: ['SELECT { margin-bottom: 20px;']
})
export class CountryListComponent implements OnInit {
  selectedCountry: Country;
  countries = [
     new Country(1, 'USA' ),
     new Country(2, 'India' ),
     new Country(3, 'Australia' ),
     new Country(4, 'Brazil'),
     new Country(5, 'Russia')
  ];
  
  ngOnInit() {
    this.selectedCountry = this.countries[1];
  }
  
  onInput($event) {
    $event.preventDefault();
    console.log('selected: ' + $event.target.value);
  }
}

<select [(ngModel)]="selectedCountry.id" (input)="onInput($event)">
  <option *ngFor="#country of countries" value= {{country.id}}>{{country.name}}</option>
</select>

<div *ngFor="#country of countries">{{country.name}}</div>