title: jQuery click bind with angularjs
body: <p>I am using jQuery click bind for smoothzoom image zoom plugin. But binding is not working when implemented with angularjs. I am new to angular and jQuery. So please help.</p>
  
  <p>This is my jQuery function for zoom. It is actually trying to retrieve image_url from href.</p>
  
  <pre><code>jQuery(function($){
      $('.zoom_thumbnails').find('li a').each(function (){
          $(this).bind('click', {src: $(this).attr('href')}, function (e){
                $('#zoom_container').smoothZoom('destroy').css('background-image', 'url(css/zoom_assets/preloader.gif)').smoothZoom({
                       image_url: e.data.src,
                        width: '100%',
                        height: '300%',
                     });
                 return false;
             });
         }).eq(0).trigger('click');
       });
  </code></pre>
  
  <p>My html code is below.</p>
  
  <pre><code>&lt;div id="zoom_container"&gt;&lt;/div&gt;
  &lt;ul class="zoom_thumbnails"&gt;
      &lt;div  ng-repeat="image in zoomImages"&gt;
          &lt;li&gt;&lt;a href={{image.img}} data-size="500,400"&gt;
              &lt;img src={{image.img}} style="height: 15%"&gt;
              &lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am using a controller in which images are stored in a array zoomImage. When i am trying to hardcode the image url it is working fine. But while using ng-repeat the binding does not happen in jQuery. Some one please  help me solving this issue. I tried placing jQuery function inside html page as well as the controller. </p>