JSFiddle - React, Tailwind, and code Playground

HTML

<span>{{cartItems.domainName}}</span>
									<div class="row head-light">
										<div class="col-md-8 col-sm-9 col-xs-9">Quantity</div>
										<div class="col-md-4 col-sm-3 col-xs-3 text-center"
											ng-model="quantity">{{cartItems.quantity}}</div>
									</div>
									<div class="row left-normal">
										<div class="col-md-8 col-sm-9 col-xs-9">1 Year</div>
										<div class="col-md-4 col-sm-3 col-xs-3 text-center"
											ng-model="currency">{{cartItems.currency}}</div>
											
											<div>{{cartItems.total()}}</div>
									</div>
								</div>
							</perfect-scrollbar>
							</div>								
							<div class="row total-div">
								<div class="col-md-7 col-sm-8 col-xs-7">
									<span class="total-txt">Total:{{Totalcurrency}}</span>
								</div>
								<div class="col-md-5 col-sm-4 col-xs-5">${{Totalcurrency}}</div>
							</div>

JavaScript

App.factory('Item', function() {
			  function Item() {
			    this.total = function() {
			      return (this.quantity * this.currency) || 0;
			    }
			  }

			  return Item;
			});
		
		App.controller('CartController', function($scope, Item) {
		$scope.cartDetails = [new Item(), new Item(), new Item(), new Item()];
		$scope.$watch('cartDetails', function() {
		 var Totalcurrency = 0;
		 $scope.cartDetails.forEach(function(cartItems) {
			 Totalcurrency += cartItems.total();
		    });
		 $scope.$watchCollection('cartItems', function(){
			    $scope.total = $scope.cartDetails.quantity * $scope.cartDetails.currency;
			  });
		    $scope.Totalcurrency = Totalcurrency;
		    
		    $scope.Totalcurrency = function(){
				var total = 0;
				for(count=0;count<$scope.items.length;count++){
					total += $scope.cartDetails.currency*$scope.cartDetails.quantity;
				}
				return total;
			}

		    
		  }, true);

		
	});
 });
	
		
};