angularjs - How to bind events in angular directive -

i new angular , having problem bind click event directive.

i have ul-list links in each li. when click link want service call adds or removes clicked items id , refresh list.

when refreshed, each list items show if id "marked" or not.

can 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 gett data                 $scope.booklist = data;                 $element.qtip({ //use 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 string. ul show in 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 click event here , pass bookid) > " + val.booklistnamn + "-- mark </a></li>";         } else {             rettext += "<li><a (need click event here , pass bookid) >" + val.booklistnamn + "--</a></li>";         }     });     rettext += "</ul>";     return rettext; }; 

use link function of directive (code untested):

listcontrollers.directive('qtip', ['boklistorservice', function (boklistorservice) {     return {         restrict: 'a',          link: function ($scope, element, attrs) {             element.bind('click', function () {                 //do work here             });         },                      controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {                                           boklistorservice.getdata().then(function (data) { //serice call gett data                 $scope.booklist = data;                 $element.qtip({ //use 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                     }                 });             })                    }]     }; }]);