angularjs-placeholder-polyfill.js

/*  
	HTML5 placeholder polyfill for IE8, 9
*/
angular.module('directives.placeholder', []).directive('placeholder', function(){
	//	cn-placeholder directive definition object
	return {
		restrict: 'A',
		require: 'ngModel',
		link: function(scope, elm, attrs, ctrl) {
			if (!Modernizr.placeholder) {
				//	setup the label overlay for input
				var label = elm.parent()
								.css({'position':'relative'})
								.prepend('<span>' + elm.attr('placeholder') + '</span>')
								.find('span')
								.css({'color':'#999', 'position':'absolute','top':'5px','left':'7px'})
								.bind('click', function(){
									elm[0].focus();
								});
				//	remove the label overlay when a value is typed
				elm.bind('keyup keydown', function(){
					if (elm.val() !== '') {
						label.remove();
					} else {
						elm.parent().prepend(label);
					}
				});
			}
		}
	};
});

The following cases are not handled in this directive:

1. Clear placeholder text on auto complete.
2. Click on the placeholder text doesn't work when state changed from focussed to blurred to focussed again.
3. Padding is calculated as per the input element.

Handled those here. https://github.com/vikasgulati/angularjs-placeholder.

Thank you for your comments and reference.