javascript - AngularJS - jQuery not called while using jCrop -

scripts , css

<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-rc1/css/jcrop.min.css" /> <script src="assets/plugins/jquery/jquery-2.1.4.min.js"></script> <script src="assets/js/jcrop2.0.min.js"></script> <script src="assets/js/jcrop_main.js" type="text/javascript"></script> <script src="assets/css/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/lib/angular/1.5.5/angular.js"></script> 

html

<div class="jcrop_example">     <img src="assets/img/floor.jpg" id="cropbox1" />         <div style="margin:5px;">             <label>x1 <input type="text" name="x" id="x" size="4"/></label>             <label>y1 <input type="text" name="y" id="y" size="4"/></label>             <label>x2 <input type="text" name="x2" id="x2" size="4"/></label>             <label>y2 <input type="text" name="y2" id="y2" size="4"/></label>             <label>w <input type="text" name="w" id="w" size="4"/></label>             <label>h <input type="text" name="h" id="h" size="4"/></label>         </div>      <div style="margin:5px;">             <input type="submit" value="crop image" />             <input type="button" value="popupzonedetail">     </div>             </div> 

jcrop_main.js

$(function (){      // sample 1     $('#cropbox1').jcrop({ // linking jcrop our image id=cropbox1         aspectratio: 0,         onchange: updatecoords,         onselect: updatecoords     });      var i, ac;      // handler kill action     function nothing(e) {         e.stoppropagation();         e.preventdefault();         return false;     };      // returns event handler animation callback     function anim_handler(ac) {         return function(e) {             api.animateto(ac);             return nothing(e);         };     };      // setup sample coordinates animation     var ac = {         anim1: [0,0,40,600],         anim2: [115,100,210,215],         anim3: [80,10,760,585],         anim4: [105,215,665,575],         anim5: [495,150,570,235]     };      // attach respective event handlers     for(i in ac) jquery('#'+i).click(anim_handler(ac[i]));   });  function updatecoords(c) {      $('#x').val(c.x);     $('#y').val(c.y);     $('#w').val(c.w);     $('#h').val(c.h);      $('#x2').val(c.x2);     $('#y2').val(c.y2);       var rx = 200 / c.w; // 200 - preview box size     var ry = 200 / c.h;      $('#preview').css({         width: math.round(rx * 800) + 'px',         height: math.round(ry * 600) + 'px',         marginleft: '-' + math.round(rx * c.x) + 'px',         margintop: '-' + math.round(ry * c.y) + 'px'     }); };    jquery(window).load(function(){     $("#accordion").accordion({autoheight: false,navigation: true}); });  function checkcoords() {     if (parseint($('#w').val())) return true;     alert('please select crop region press submit.');     return false; }; 

for above code, not able call click function code $('#cropbox1').click(function() when used angularjs

this being used crop image unfortunately not work. while same works in sample poc without including angulajs , bootstrap.min.js

reference can seen here - http://andrefarzat.github.io/ng-jcrop/ please guide.