Angular watch changes in DOM element

Question

I have some real-time feed coming to my page with Nodejs and Socket.io to my page like this:

<script type="text/javascript">
    window.onload=function(){
      const socket = io.connect('http://###.###.###.###:4000');
      socket.on('update', update => {
        //console.log(update);
		if(update.symbol === "EURUSD") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*10000;
			$('.eurusd').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(5)+'</div><div class="ask">'+$ask.toFixed(5)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		}
		if(update.symbol === "GBPUSD") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*10000;
			$('.gbpusd').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(5)+'</div><div class="ask">'+$ask.toFixed(5)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		}
		if(update.symbol === "USDJPY") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*100;
			$('.usdjpy').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(3)+'</div><div class="ask">'+$ask.toFixed(3)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		} 	
        if(update.symbol === "AUDUSD") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*10000;
			$('.audusd').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(5)+'</div><div class="ask">'+$ask.toFixed(5)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		}
		if(update.symbol === "USDCAD") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*10000;
			$('.usdcad').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(5)+'</div><div class="ask">'+$ask.toFixed(5)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		}
		if(update.symbol === "USDCAD") {
		    $bid = parseFloat(update.bid);
			$ask = parseFloat(update.ask);
			$spread = ($ask - $bid)*10000;
			$('.usdcad').html('<div class="symbol">'+update.symbol+'</div><div class="bid">'+$bid.toFixed(5)+'</div><div class="ask">'+$ask.toFixed(5)+'</div><div class="pips">'+$spread.toFixed(2)+'</div>')
		}
		else {
			
		}
      })
    }
  </script>

<ul class="table">
		<li>
			<div><b>SYMBOL</b></div>
			<div><b>BID</b></div>
			<div><b>ASK</b></div>
			<div><b>SPREAD</b></div>
		</li>
		<li class="eurusd">
			<div class="symbol">EURUSD</div>
			<div class="bid up">1.17016</div>
			<div class="ask up">1.17017</div>
			<div class="pips">0.1</div>
		</li>
		<li class="gbpusd">
			<div class="symbol">GBPUSD</div>
			<div class="bid up">1.17016</div>
			<div class="ask up">1.17020</div>
			<div class="pips">0.4</div>
		</li>
	</ul>

the data in element with Bid and Ask class changes multiple time in second.

I want to use angular to watch these elements value and and add Up or Down class to it if the value is higher than previous value or lower than previous value.

how to do this? an small sample can help me a lot.