AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="HelloApp">
    <div ng-controller="MyCtrl">
        <search-bar/>
    </div>
</div>

JavaScript

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

app.directive('searchBar', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<input type="text" ng-model="searchData" placeholder="Enter a search" />',
    link: function(scope, elem, attrs) {
      elem.bind('keyup', function() {
        scope.$apply(function() {
         scope.search(elem);
        });
      });
    }
  };
});

app.controller('MyCtrl', function ($scope) {
        $scope.search = function(element) {
            console.log(element);
            alert ("keypressed. Value so far is: " + element.val());
        };
    }
);