title: Angular 2 NgModel doesn't work
body: <p>I'm starting my transition from Angular 1 to Angular 2. I tried to do simple things first so I wrote a component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component} from 'angular2/core';
  import {NgModel} from 'angular2/common';
  
  @Component({
    selector: 'app',
    template: `
      &lt;div&gt;
      &lt;div&gt;Value is {{ value }}&lt;/div&gt;
      &lt;input type="text" [(ngModel)]="value" /&gt;
      &lt;/div&gt;
    `,
    directives: [NgModel]
  })
  export class App {
    value: string;
  };
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular2&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;app&gt;&lt;/app&gt;
  
      &lt;script src="./js/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(bundle.js do only the bootstrapping of <code>app</code> component)</p>
  
  <p>I expect after I type something into the textbox, I should get the same text in the <code>div</code>. But it doesn't happen.</p>
  
  <p>Why doesn't my code work?</p>
  
  <p>Regards,
  Sarun</p>
  
  <p><strong>UPDATE</strong> I assume I may configure my build system incorrectly, so I include my <code>gulpfile.js</code>, <code>package.json</code> and <code>boot.ts</code>.</p>
  
  <p>gulpfile.js</p>
  
  <pre><code>var gulp = require('gulp');
  var browserify = require('browserify');
  var tsify = require('tsify');
  var source = require('vinyl-source-stream');
  var uglify = require('gulp-uglify');
  var buffer = require('vinyl-buffer');
  var sourcemaps = require('gulp-sourcemaps');
  
  gulp.task('ts', function() {
    browserify({
      debug: true
    })
    .add('source/ts/boot.ts')
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
  });
  
  gulp.task('watch', function() {
    gulp.watch('source/ts/**/*.ts', ['ts']);
  });
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "hello-angular2",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "angular2": "^2.0.0-beta.0",
      "es6-promise": "^3.0.2",
      "es6-shim": "^0.34.0",
      "reflect-metadata": "^0.1.2",
      "rxjs": "^5.0.0-beta.0",
      "zone.js": "^0.5.10"
    },
    "devDependencies": {
      "browserify": "^12.0.1",
      "gulp": "^3.9.0",
      "gulp-exec": "^2.1.2",
      "gulp-live-server": "0.0.29",
      "gulp-sourcemaps": "^1.6.0",
      "gulp-uglify": "^1.5.1",
      "gulp-watch": "^4.3.5",
      "lite-server": "^1.3.2",
      "tsify": "^0.13.1",
      "typescript": "^1.7.5",
      "vinyl-buffer": "^1.0.0",
      "vinyl-source-stream": "^1.1.0"
    }
  }
  </code></pre>
  
  <p>boot.ts</p>
  
  <pre><code>import 'reflect-metadata';
  import {bootstrap} from 'angular2/platform/browser';
  import {App} from './app';
  
  bootstrap(App);
  </code></pre>