JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/22367636/angularjs-real-time-stock-ticker-flash-highlight-green-or-red-when-value-chang

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app" ng-controller="appcontrol">
    <div>
        <ul>
            <li>{{ stocks[0].code }}</li>
            <li highlighter="stocks[0].bid">{{ stocks[0].bid }}</li>
            <li highlighter="stocks[0].ask">{{ stocks[0].ask }}</li>
        </ul>
           <ul>
            <li>{{ stocks[0].code }}</li>
            <li highlighter="stocks[0].bid">{{ stocks[0].bid }}</li>
            <li highlighter="stocks[0].ask">{{ stocks[0].ask }}</li>
        </ul>
    </div>
    <input type="button" value="poll on/off" ng-click="stop = !stop" />
    <div ng-show="stop">Polling off</div>
    <div ng-show="!stop">Polling on</div>
</div>

CSS

.highlight-normal {
    font-weight: 400;
    font-size:1em;
}
.highlight-bold {
    font-weight: 700;
    font-size:2em;
}
li {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    font-weight: 400;
    font-size:1em;
}

JavaScript

var app = angular.module("app", []);
app.controller("appcontrol", function ($scope, $timeout) {
    $scope.stop = false;
    $scope.stocks = [{
        code: 0,
        bid: 110,
        ask: 100
    }, {
        code: 1,
        bid: 100,
        ask: 150
    }, {
        code: 2,
        bid: 95,
        ask: 80
    }, {
        code: 4,
        bid: 115,
        ask: 90
    }];

    var poll = function () {
        if ($scope.stop) return;

        //simulate stock values rising and falling
        for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.stocks[i].bid += Math.random()<.5 ? 5 : -5;
            $scope.stocks[i].ask += Math.random()<.5 ? -5 : 5;
        }
        $timeout(poll, 2500);
    };
    poll();
});
app.directive('highlighter', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.highlighter, function (nv, ov) {
                if (nv !== ov) {
                    var newclass = nv < ov ? 'highlight-bold' : 'highlight-normal';

                    // apply class
                    element.addClass(newclass);

                    // auto remove after some delay
                    $timeout(function () {
                        element.removeClass(newclass);
                    }, 1000);
                }
            });
        }
    };
});