Edit in JSFiddle

<div class="container" ng-app="app" ng-controller="MainCtrl">
    <header>
        <div class="page-header">
             <h2>値のバインディング（自動挿入）</h2>

        </div>
    </header>
    <section>
        <!-- app.js内の$scope.dateを自動的に表示 -->
        <!-- （jQueryなどを使うより簡単！HTMLそのもがテンプレートであるところが新しい。） -->
         <h4>現在時刻：{{date}}</h4>

         <h4>あなたの名前を教えて下さい！</h4>

        <!-- ng-modelを指定するとapp.js内で$scope.nameと定義したのと同じことになる -->
        <input type="text" class="form-control" placeholder="あなたの名前を入力してください" ng-model="name" />
        <!-- ユーザーの入力がリアルタイムで表示される -->
         <h4>「{{name}}」さんですね？</h4>

    </section>
</div>

// appというAngularJSアプリケーションモジュールを作成
var app = angular.module('app', []);

// アプリケーションモジュールにMainCtrlというコントローラーを追加
app.controller('MainCtrl', function ($scope) {

    //コントローラーのスコープにdateという変数を追加
    $scope.date = new Date();

});