javascript - Browser not redrawing images with updated ng-src on them in an Angular webapp -

i trying apply random transform couple of divs (thumbs in image gallery) jquery in angular application, this:

$timeout(function() {     jquery('.thumb-item').each(function(){         $(this).css('transform', 'rotate(' + getrandomarbitrary(-6, 6) + 'deg)');     }); }, 10); 

the transform works. it’s multi language site, , changing language, changes 'ng-src' attribute of images.

<slick id="slick-nav" asnavfor="#slick-carousel" arrows="false" ng-cloak>        <div class="thumb-item col5-unit" ng-repeat="look in looks">         <div class="frame-small" ng-click="gotoslide($index)">              <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">         </div>     </div> </slick> 

even though ng-src attribute of images change (if check on chrome devtools), rendered images don't. it's bit random behaviour, but:

• the rendered images seem apply when viewport has large width (desktop)
• if viewport narrow, images don't update
• if images don't update when changing languages, update on resize (i have no happen in chrome (desktop , mobile) , safari. firefox good.
• the same image src set <img> element on same view (the large image of gallery), , 1 updates correctly. it's same markup small thumb (<img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">).

when realized conflict between angular , jquery each trying manipulate dom somehow in own particular way, decided use ng-style directive:

<slick id="slick-nav" asnavfor="#slick-carousel" arrows="false" ng-cloak>        <div class="thumb-item col5-unit" ng-repeat="look in looks" ng-style="{'transform': randomrotate, '-webkit-transform': randomrotate, '-ms-transform': randomrotate }">         <div class="frame-small" ng-click="gotoslide($index)">              <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">         </div>     </div> </slick> 

and in controller:

$scope.randomrotate = function(){     return 'rotate(' + getrandomarbitrary(-6,6) + 'deg)'; } 

and same results: images don't update (although sources do). if delete element in chromedevtools (after changing language), nothing happens, it's not rendered or it's behind bogus element, visible (rendered), old source, , there's no corresponding element in markup.

please me understand drudgery behind this! thank you.

i'm using angular-slick directive.

update

i tried using trick (got here) in order make images redraw:

var thumbitems = document.getelementsbyclassname("thumb-item");

for (i = 0; < thumbitems.length; i++) {     console.log('for');     thumbitems[i].style.display='none';     thumbitems[i].offsetheight;     thumbitems[i].style.display=''; } 

now, apparently little chunk of few images redraw when changing language. , redraw hover them cursor.

after trying many things - example, using class, , then, ng-class add random classes transforms rotate rules on them (which lead couple of different errors) - figured out how solve (but not why problem happens):

i moved ng-style .thumb-item element .frame-small element:

<slick id="slick-nav" asnavfor="#slick-carousel" arrows="false" ng-cloak>     <div class="thumb-item col5-unit" ng-repeat="look in looks">         <div class="frame-small" ng-click="gotoslide($index)" ng-style="{'transform': randomrotate, '-webkit-transform': randomrotate, '-ms-transform': randomrotate }">              <img ng-src="image/quiz/answers/{{ translate( look.src ) }}" alt="">         </div>     </div> </slick> 

maybe it's issue having 'ng-repeat' , 'ng-style' css3 transforms on same element? , why on viewport width range? maybe that's because element column of foundation grid?