How to retrigger ng-if / ng-show animation when using $http cache

Question

Within a factory service, I have to use

$http.get(url, { cache: true })

In my view, i am using ng-if or ng-show to trigger a CSS transition.

The problem :

It is working great for the first request, but obviously for the next request of the same service function, the animation is not re-triggered.

Is there a way to reset / retrigger the ng-if / ng-show animation ?

(The cache is needed so i can avoid waiting time, but i still need to have opacity animation triggered between different states).

Thank you !

app.factory('progService', function ($http) {
    var progService= {};
    progService.getProgram = function() {
        return $http.get(appInfo.api_url + 'pages/5', { cache: true});
    };
    return progService;
});

app.controller('programController', function($scope, progService) {
    progService.getProgram().then(function(res){
        $scope.program = res.data;
    });
});

<div ng-if="program.aJsonKey"></div>

Answer 1

Your view is not updated because you're passing the same, cached object. In order to execute the $watcher of ngIf, you should provide a "fresh"/new object. You would also need probably to change the state, because ngIf would expect true or false. So in your case should be something like this:

app.controller('programController', function($scope, progService) {
    $scope.program = null;
    progService.getProgram().then(function(res){
        $scope.program = angular.copy(res.data); // Returns a copy of the object. Always a new object!
    });
});