Advice on Angular J , JQuery issue needed

Issue in Angular J , JQuery Our issue is that we can not load images inside the loop in jquery and angularJs. There is problem is that when we load first image, there is some time in between loading first image, in this time next function executed for second function gets called. Our aim is that we have to wait for all execution of first image and thenexecution goes to second image and all other images same. I case of multiple pages in PDF let us consider we have 10 pages in that PDF, while loading our PDF in canvas we have to convert it into image one by one page. Now consider we have editing first page, We have to write first page image on Canvas and then we write content of that page on that canvas but here problem is that we load first page on canvas it takes some more time in between that time another function automatically gets called which need not to get called before completing above process. if you want to check actual piece of code for (var i = 0; i < 10; i++) { var b_canvas1 = [login to view URL]("printcanvas"); var canvasContext = [login to view URL]("2d"); [login to view URL](0, 0, [login to view URL], [login to view URL]); var img = new Image(); [login to view URL] = function () { [login to view URL](img, 0, 0, [login to view URL] * 0.65, [login to view URL] * 0.65); //here also we having lot of functionality and after that having 1500-2000 lines and then we made image from that canvas like following var img1=new Image(); img1.onload=function(){ //here we made images from canvas $("#print_images").append("<img src='" + [login to view URL] + "' width='713' height='434'/>"); } img1.src=[login to view URL](); } [login to view URL] = imggg[i]; } JG