Base Web View

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="itemSearch" clear-input clear="clearFilter()" />
        <button ng-click="clearFilter()">Clear</button>
        <ul>
            <li ng-repeat="item in items|filter:itemSearch"> <span>{{item.value}}</span>

            </li>
        </ul>
    </div>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.items = [{
        value: 'one two three'
    }, {
        value: 'four five six'
    }];
    $scope.clearFilter = function () {
        $scope.itemSearch = '';
    };
}

app.directive('clearInput', function () {
    function isEscapeKey(keyCode) {
        if (keyCode === 27) {
            return true;
        }
        return false;
    }
    return {
        link: function (scope, element, attrs) {
            element.bind('keyup',function (event) {
                if (isEscapeKey(event.keyCode)) {
                    scope.$eval(attrs.clear);
                    scope.$apply();
                }
            });
        },
    };
});