Chrome (but not Firefox) autofill is overlapping label text despite jquery

After reading Benjamin Miles tutorial I noticed you can detect chromes autofill with jquery like so:

$(window).load(function(){
   if($('input:-webkit-autofill')){
      //Remove Label Function
   }        
});

Note that you must place the code in $(window).load(function(){});

and not

$(document).ready(function(){}) 

You can try injecting a placeholder attribute from controller like this

setTimeout(function() {
function compile(element) {
    var el = angular.element(element);
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function($compile) {
        $compile(el)($scope)
    })
}
var elem = document.querySelectorAll(':-webkit-autofill');
for (i = 0; i < elem.length; ++i) {
    elem[i].setAttribute("placeholder", "");
    compile(elem);
}}, 500);

Chrome (and, equivalently, Google Toolbar's Autofill on other browsers) is a bad citizen of the web with its form filling behavior. When it fills in form fields, it does not fire the normal events. If you don't wish to disable autofill, you can set up a timed event which periodically checks to see if autofill has occurred.

The first answer (by the question asker) of this SO question is one example solution.