JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<div class="container" ng-app="app" ng-controller="MainCtrl">
    <header>
        <div class="page-header">
             <h2>バインディングに連動した要素の表示・非表示</h2>

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

        <!-- ng-modelを指定するとapp.js内で$scope.nameと定義したのと同じことになる -->
        <input type="text" class="form-control" placeholder="あなたの名前を入力してください" ng-model="name" />
        <!-- ユーザーの入力がリアルタイムで表示される -->
        <!-- ng-hideで条件を指定することで自動的に表示・非表示が行われる（初期状態では表示されない） -->
         <h4 ng-hide="name == null || name == ''">「{{name}}」さんですね？</h4>

    </section>
</div>

JavaScript

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

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