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

you probably need to set up your own flag in this case. for example:

app.controller('programController', function($scope, progService) {

    $scope.programDisplay = false;

    progService.getProgram().then(function(res){
        $scope.program = res.data;
        angular.element(document).ready(function () { 
            $scope.programDisplay = true;
        });
    });
});

then

<div ng-if="program.acf.exerpt && programDisplay"></div>