jQuery click bind with angularjs


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.

This is my jQuery function for zoom. It is actually trying to retrieve image_url from href.

$('.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;

My html code is below.

<div id="zoom_container"></div>
<ul class="zoom_thumbnails">
<div ng-repeat="image in zoomImages">
<li><a href={{image.img}} data-size="500,400">
<img src={{image.img}} style="height: 15%">

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.

Problem courtesy of: user2297752


I do not know about your smooth-zoom function, but you can have a look a this demo for a directive exemple for switching a container background-image from a thumbnail image.

Link: Plunker Demo

Solution courtesy of: jpmorin

View additional discussion.