angularjs image src change when model changes

Question

I am rotating an image on the server and I was wondering how to show the image change on my page?

I think I have to use $scope.$apply() but everytime I use it i get the error message "digest cycle in progress"

template.html

 < img src='{{tempimagefilepath}}/> <!--image-->

controller.js

 photoalbumServ.rotate_photo(post).then(function(data) {
  //after server modifies photo
    $scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg";
     $scope.$apply();
    });

thanks

Solution:

My solution was changing the scope value {{tempimagefilepath}} so the image will change. That required me to constantly rename the file on the server when I rotate the image.

Answer 1

Two things. First, you should use ng-src rather than src to prevent your clients attempting to load the image before angular has evaluated the expression.

Second, you pass $apply() a function callback that makes the necessary scope changes:

photoalbumServ.rotate_photo(post).then(function(data) {
    //after server modifies photo
    $scope.$apply(function() {
        $scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg"; 
    });
});

Answer 2

I think this is because your browser cache. don't need $apply()

try this

var random = (new Date()).toString();
$scope.tempimagefilepath = newUrl + "?cb=" + random;