angularjs - How to add an element and bind an event to it? -

i want make resize-directive. therefore want create new element (the resizer) , bind event it, in code event bind directive-rootelement:

elm.append('<div class="iwresizable__resizer"></div>').bind('mousedown', function ($event) {                         startw = elm.prop('offsetwidth');                         starth = elm.prop('offsetheight');                         initialmousex = $event.clientx;                         initialmousey = $event.clienty;                         $document.bind('mousemove', mousemove);                         $document.bind('mouseup', mouseup);                         $event.preventdefault();                 }); 

how can bind mousedown-event new div?

here plunker

if not using jquery (which don't seem to), should instantiation/binding , appending in different statements:

var resizer = angular.element('<div class="myresizable__resizer"></div>')                      .bind('mousedown', function ($event) {...}); elm.append(resizer); 

if using jquery, use appendto() function (which not implemented in jqlite), this:

$('<div class="myresizable__resizer"></div>').appendto(elm).bind(...);