JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="demo" ng-app="Foobar">
    <div ng-controller="DemoCtrl">
        <form ng-submit="run()" handle-phone-submit>
            <input type="text" ng-model="query" />
            <button ng-disabled="!query">OK</button>
        </form>
        <p ng-show="message != null">{{message}}</p>
    </div>
</div>

JavaScript

angular.module('Foobar', [])
.controller('DemoCtrl', ['$scope', function ($scope) {
    $scope.query = null;
    
    $scope.message = null;
    
    $scope.run = function () {
        console.log('Running...');
        $scope.message = 'Your query was: ' + $scope.query;
    };
}])
.directive('handlePhoneSubmit', function () {
    return function (scope, element, attr) {
        var textFields = $(element).children('input[type=text]');
        
        $(element).submit(function() {
            console.log('form was submitted');
            textFields.blur();
        });
    };
});