I am fairly experience with Angular by now, but this appears to be something happening at a lower level with the way DOM events are propagated. For some reason in just part of my application I have ng-focus and ng-blur on the same input, but the ng-focus event fires twice and the ng-blur never fires.
<input type=text ng-focus=doFocus() ng-blur=doBlur() />
Then in my controller
$scope.doFocus = function(){
console.log('focus');
}
$scope.doBlur = function(){
console.log('blur');
}
When I inspect my console, I see 2 focus and no blur messages... I have tested this in other parts of my website and it works in some others. My guess is it has something to do with the DOM, but I have even tried pulling out basically everything on the page except the input and it still didn't work correctly. Does anyone have any idea what could cause this?
UPDATE
After some more debugging, I noticed that the focus event is fired once in the scope of the browser, but the event triggers twice in the world of AngularJS. I set a breakpoint on all Focus events using Chrome Dev Tools and it only would hit once, but if I log the Angular $event in the console, I can see the EXACT same $event with the same timestamp being triggered twice in Angular.
