JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div>
    <ul class="list-inline" ng-controller="entryController">
        <li>{{enteredData}}
            <my-text-box data="enteredData" />
        </li>
        <li>
            <button class="btn btn-info" ng-click="enterClick();">Enter</button>
        </li>
    </ul>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('myTextBox', [function () {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        template: '<input type="text" class="form-control" ng-model="data" placeholder="Please enter..."  />'
    };
}]);

myApp.controller('entryController', ['$scope', function ($scope) {
    $scope.enteredData = 'Stuff';
    $scope.enterClick = function () {
        alert($scope.enteredData);
    };
}]);