ng-if content not updating when in ng-leave phase

Question

If this snippet is run:

<div ng-init="o={i:1}" ng-click="o.i = o.i + 1">
    <h1>{{o.i}}</h1>
    <div class="test" ng-if="o.i < 3" style="transition: 3s all;">
        <h1>{{o.i}}</h1>
    </div>
    <button ng-click="o.i=0">reset</button>
</div>

{{o.i}} displays the incrementing number on each click, but once o.i=3, the inner h1 still displays {{2}} though it's not hidden for 3 more seconds. Is it possible for that to update until the animation is complete and the item is hidden?

Answer 1

Change the ng-if to ng-show:

<div ng-init="o={i:1}" ng-click="o.i = o.i + 1">
    <h1>{{o.i}}</h1>
    <div class="test" ng-show="o.i < 3" style="transition: 3s all;">
        <h1>{{o.i}}</h1>
    </div>
    <button ng-click="o.i=0">reset</button>
</div>