JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<body ng-controller="exampleCtrl">
    <section class="container">
        <div class="form-group">
            <label for="inputName">Your name</label>
            <input type="text" class="form-control" id="inputName" placeholder="Enter your name" ng-model="name">
        </div> <a href="#" ng-class="getClassForButton()" role="button" ng-click="doClick()">Salute</a>

        <p>This is the name you're typing: {{name}}</p>
        <p>{{salute}}</p>
    </section>
    <script>
        angular.module('example', [])
            .controller('exampleCtrl', ['$scope', function($scope) {
            $scope.salute = "I am waiting for your name to properly salute you";
            $scope.doClick = function() {
                $scope.salute = "Hello " + $scope.name + "!"
            }
            $scope.getClassForButton = function() {
                if (angular.isDefined($scope.name) && $scope.name.length > 3) {
                    return "btn btn-primary btn-lg";
                } else {
                    return "btn btn-primary btn-lg disabled";
                }
            }
        }]);
        angular.bootstrap(document, ['example']);
    </script>
</body>