How to wait for state change in AngularJS?

Question

Using Angular 1.2.3, I have a service like this:

var itemService = function ($resource) {
    return $resource('/rest/item', {action: ''}, {
        query: {method: 'GET'}
    });
};
services.factory('Item', ['$resource', itemService]);

In my controller, I want to save an item, so I do

$scope.item = Item.query(); // this returns 1 item
$scope.puppet.$save(); // this results in the desired POST on my service

The POST handler generates an image which may take a while. I understand that the $save call returns immediately, since the call is asynchronous. As soon as the POST handler is done, it returns an Item with a boolean calculationsDone = true, this is reflected in the $scope.

<div ng-show="item.calculationsDone"><img ng-src="{{src/of/image.jpg}}"/></div>

Now I want to show the generated image. I'm using the above html. I know the URL to the generated image already but I can't put it in the ng-src because it doesn't resolve yet.

How do I update or re-apply the ng-src as soon as the state of the Item changes?

Do I need to use a promise? Or $watch?

Answer 1

How about something like this ?

$scope.imageSrc = "";
scope.puppet.$save(function(value, responseHeaders) {
 $scope.imageSrc = "src/of/image.jpg";
})

<img ng-src="{{imageSrc}}"/>

Another option I guess is ng-if="item.calculationsDone" for the image element. The img element is then attached to the DOM once the expression evaluates to true. Before that it is is not part of the DOM -> the image will also be not loaded.