javascript - AngularJS - directive not working -

i angularjs newby. trying display image using template of angularjs directive , on click of image want marker placed on image. don't know why not working.

the first directive:

directive('hello', function() {     return {         template: '<img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  />',         link: function(scope, element, attrs) {             $('#map').click(                 function(e) {                       $('#marker').css('left', e.pagex).css('top', e.pagey).show();                 }             );          },      }; }); 

the html code

 <hello>     <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" />     </hello> 

you missing restrict : 'e' option, default restrict has value ac attribute , class, in case using directive element.

update: based on comment

angular.module('test', []).directive('hello', function() {     return {         restrict : 'e',         template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>',         replace: true,         link : function(scope, element, attrs) {             $('#map').click(function(e) {                         $('#marker').css('left', e.pagex).css('top', e.pagey)                                 .show();                     });         }     }; }); 

demo: fiddle