How to bind events in angular directive - angularjs

Question

I am new to angular and having problem to bind an click event to my directive.
I have an ul-list with a links in each li. When I click a link I want to do a service call that adds or removes the clicked items ID and refresh the list.
When refreshed, each list items will show if an id is "marked" or not.
Can anyone help me?
html view:
<a href="#" class="showbooklist" qtip="12568">
<img src="image.png">
</a>
Directive:
listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) {
return {
restrict: 'A',
controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {
boklistorservice.getdata().then(function (data) { //serice call to gett data
$scope.booklist = data;
$element.qtip({ //use the jquery.tip2.js tooltip plugin
content: {
text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor)
},
position: {
my: 'bottom center',
at: 'top center'
},
hide: {
fixed: true,
delay: 300
}
});
})
}]
};
}]);
//function returns a string. An ul to show in the toolbox
var getcurrentbooklist = function (bookid, arr) {
var rettext = "<ul>";
$.each(arr, function (item, val) {
item;
var inlist = false;
$.each(val.bookitems, function (i, v) {
if (v.bookid == bookid) {
inlist = true;
return false;
} else {
inlist = false;
}
});
if (inlist) {
rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) > " + val.booklistnamn + "-- MARK </a></li>";
} else {
rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) >" + val.booklistnamn + "--</a></li>";
}
});
rettext += "</ul>";
return rettext;
};

Answer 1

Use the link function of a directive (code untested):
listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
element.bind('click', function () {
//Do your work here
});
},
controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {
boklistorservice.getdata().then(function (data) { //serice call to gett data
$scope.booklist = data;
$element.qtip({ //use the jquery.tip2.js tooltip plugin
content: {
text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor)
},
position: {
my: 'bottom center',
at: 'top center'
},
hide: {
fixed: true,
delay: 300
}
});
})
}]
};
}]);

Answer 2

jquery.tip2 adds the html to body so you need to find the content in body and add the click event
$element.qtip();
angular.element(document.body).find('[qtip container id or class or element] a').bind('click', function () {
//Do your work here
});