Angularjs - Changing view with json return

Question

My app checks the state of a bulb and creates an animation in the view.

I am making a request ajax with angular and in return for success I have to animate a lamp lighting, follows excerpt from the code:

$scope.checkLuzOk = function (response) {
    (response.data.luzSala === '1') ? aninOn($scope.luzSala) : $scope.aninOff($scope.luzSala);
}

have a luzSala in the archive html for animation and I’m using the $scope.luzSala as a parameter in the functions aninOn() and aninOff(), follows part of the animation:

var aninOn = function (luz) {
        var images = [
            "light0.png",
            "light10.png",
            "light20.png",
            "light30.png",
            "light40.png",
            "light50.png",
            "light60.png",
            "light70.png",
            "light80.png",
            "light90.png",
            "light100.png"
        ];

        var i = 0;
        $interval(function () {
            if (i >= images.length) {
                i = 0;
            }
            luz = images[i];
            i++;
        }, 50, 11);
    };

The problem is that the image is not being changed when I pass the

Answer 1

I think for a more complete answer we would have to see the image’s HTML, because the image code could include.

The correct way to work with images is to use the ngSrc directive, as an example of the documentation: Wrong:

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

Correct::

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

Source: https://docs.angularjs.org/api/ng/directive/ngSrc

Also, what you can do is include a $Digest() after image change:

var i = 0;
$interval(function () {
    if (i >= images.length) {
        i = 0;
    }
    luz = images[i];
    $scope.$digest();
    i++;
}, 50, 11);

Depending on your Binding deployment approach, you may need a $digest() or a $apply(), check what fits your need best. See more about $digest() and $apply() at this link:

http://gabrielfeitosa.com/angularjs-diferencas-entre-apply-timeout-evalasync-e-digest/