title: AngularJS - directive not working
body: <p>I am an AngularJS newby. I am trying to display an image using a template of an AngularJS directive and on click of the image I want a marker to be placed on the image. I Don't know why it is not working.</p>
  
  <p>The first directive:</p>
  
  <pre><code>directive('hello', function() {
      return {
          template: '&lt;img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /&gt;',
          link: function(scope, element, attrs) {
              $('#map').click(
                  function(e) {  
                      $('#marker').css('left', e.pageX).css('top', e.pageY).show();
                  }
              );
           },
       };
  });
  </code></pre>
  
  <p>The html code</p>
  
  <pre><code> &lt;hello&gt;
      &lt;img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /&gt;   
   &lt;/hello&gt;
  </code></pre>