javascript - AngularJS event binding in directive template doesnt work if mouseout used, but works with mouseover -

it seems simple problem looking on hours , cannot find answer. why mouseout or mouseleave doesnt work mouseover works? here code:

html:

<div ng-app="test">     <div class="testdiv" data-test-mouseout=""></div> </div> 

css (not important in case suppose):

.testdiv {     width: 100px;     height: 50px;     margin: 25px;     background: yellow;     position: relative; } .testhere {     position: absolute;     padding: 0;     margin: 0;     background: red;     width: 100%;     height: 10px;     top: -5px;     left: 0px; } 

js:

var app = angular.module('test', []); app.directive('testmouseout', function ($compile) {     return {         link: function (scope, ielement) {             ielement.bind('mouseover', function () {                 ielement.html('<div data-test-mouseout-here="" class="testhere">        </div>');                 $compile(ielement.contents())(scope);             });         }     }; }); app.directive('testmouseouthere', function () {     return {         link: function (scope, ielement) {             ielement.bind('mouseout', function (e) {                 e.target.style.backgroundcolor = 'blue';                 console.log('mouseout');             });         }     }; }); 

ok, supposed do? display yellow div 100x50px , when mouseover it, new red div appear inside child. red div has mouseout binding should console.log "mouseout", doesnt happened. if raplace mouseout mouseover in second directive, works. thats weird.

i trying put ngmouseout/ngmouseleave template inside first directive, same problem. ngmouseout/ngmouseleave didnt work ngmouseover worked.

here fiddle:http://jsfiddle.net/rgaqw/

same in plunker:http://plnkr.co/edit/jpihyo79qanrjermm59a

the "mouseover" event "yellow" or containing box taking precedence, "red" box keeps getting recreated because mouse moving on yellow box still, therefore never chance leave red box. if change testmouseouthere directive bind "mouseover" you'll see working, when change "mouseout" or "mouseleave" nothing happens. if unbind "mouseover" event in "yellow" box, work.

ielement.bind('mouseover', function () {     ielement.html('<div data-test-mouseout-here="" class="testhere"></div>');     $compile(ielement.contents())(scope);      ielement.unbind('mouseover'); }); 

http://jsfiddle.net/rgaqw/2/