removing a class from an element inside a $watch with angular

Question

I want to remove a class on an element from within a $watch. The class would be removed after a $timeout of a 10 seconds.

Code looks something like this:

Controller:

$scope.$watch('lastPrice', function(newVal, oldVal){
    if ( newVal > oldVal ) {
        $scope.lastTick = 'up';
    } else if ( newVal < oldVal ) {
        $scope.lastTick = 'down';
    } else {
        $scope.lastTick = 'none';
    }

    $scope.last = newVal;

    $timeout(function(){
        //remove $scope.lastTick class name from element here
    }, 10000)
});

View:

<span class="last" ng-class="lastTick">{{lastPrice}}</span>

Answer 1

I would avoid using the delete operator here since it would mean that the lastTick could be accidentally inherited from the parent scope. Instead, I would recommend:

$timeout(function () { $scope.lastTick = undefined; }, 10000);

Demo: http://jsfiddle.net/9ebjt/1/

Answer 2

Try delete operator:

  $timeout(function(){
        delete $scope.lastTick;
    }, 10000);

JSFiddle: http://jsfiddle.net/cherniv/9ebjt/