Получить целевой идентификатор прилагаемого элемента по угловому

У меня возникла проблема с получением event.target.id моего проекта angularjs.Получить целевой идентификатор прилагаемого элемента по угловому

Heres код у меня есть:

ввода-тегов в директиве

<input-tag-to></input-tag-to>

модуль:

angular 
.module('emailClient').directive("inputTagTo", function(){ 
return { 
    restrict: "E", 
    template: "<input type=text ng-model=toModel autofocus=true addtagto>", 
    controller: 'composeController' 
}});

и вот addtagto атрибут на нем

angular 
.module('emailClient').directive("addtagto", function($compile) { 
return { 
    link: function(scope, element, attrs) { 
     element.bind("keypress", function (event) { 
      if (event.which === 13) { 
        scope.addtoArray.push(scope.toModel); 
        var tagModel = scope.addtoArray.slice(-1)[0]; 
        angular.element($('#to-box')).append($compile("<span class=\"box-tag\" style=\"padding: 3px;\" id=\""+ tagModel +"\">"+ tagModel +"<span class=\"glyphicon glyphicon-remove\" style=\"cursor:pointer;padding:4px;\" removetagto></span></span>")(scope)); 
        event.preventDefault(); 
        $('.input-to').val(""); 
        scope.toModel = null; 
        $('.input-to').focus(); 
      } 

     }); 
    }, 
    controller: 'composeController' 
}});

на добавочный элемент есть директива removeaddto и id="+ scope.toModel" + на нем.

Теперь я не могу получить event.target.id на него, в котором я буду использовать в качестве значения для удаления его элемент

angular 
.module('emailClient').directive("removetagto", function($compile) { 
return { 
    link: function(scope, element, attrs) { 
     element.bind("click", function (event) { 
      console.log(event); 
      console.log(event.target.id); 
     }); 
    }, 
    controller: 'composeController' 
    }});

увидеть изображение образца