JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
    
    <div class="container-fluid">
        <div class="row-fluid">
    
            <div class="col-md-6 col-xs-6 col-ls-6" ng-controller="ListaComprasController">
                
                <h2>Lista de compras</h2>

                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Valor</th>
                            <th>Qtde</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="i in lista">
                            <td>{{ i.produto }}</td>
                            <td>{{ i.valor }}</td>
                            <td><input type="number" min="0" ng-model="quantidade" class="cart-item-qtde" placeholder="0"> <button type="button" ng-click="AdicionaCarrinho(this, $('.cart-item-qtde'));" class="btn btn-success">+</button></td>
                        </tr>
                    </tbody>
                </table>
                
                <hr>

                <input type="text" placeholder="Nome do item" ng-model="item" id="txt-item">
                <input type="text" placeholder="preco" ng-model="preco" id="txt-preco">
                <button type="button" ng-click="AdicionaItem();">Adicionar item</button>

            </div>
            
            <div class="col-md-6 col-xs-6 col-ls-6">
                <h2>Carrinho</h2>
                <ul>
                    <p class="itensCarrinho">Não há itens.</p>
                    <li ng-repeat="item in carrinho">{{ item.produto }}</li>
                </ul>
                <span ng-model="total"></span>
            </div>
            
        </div>
        
    </div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('ListaComprasController', function($scope){
    
    $scope.lista = [
        {produto: 'laranja', valor: 2},
        {produto: 'cenoura', valor: 3},
        {produto: 'melão', valor: 5}
    ];
    
    $scope.carrinho = [];
    
    //funcao para adicionar novo item
    $scope.AdicionaItem = function(){
        var item = document.getElementById("txt-item");
        var preco = document.getElementById("txt-preco");
        
        $scope.lista.push(
            { produto: item.value, valor: preco.value }
        )
        
        item.value = "";
        preco.value = "";
    }
    
    //funcao para adicionar produtos ao carrinho
    $scope.AdicionaCarrinho = function(cart){
        
        //$("p.itensCarrinho").hide();        
        
        var qtde = $('.cart-item-qtde');
        console.log($('.cart-item-qtde'));
        
        $scope.carrinho.push(
            { produto: cart.i.produto, valor: cart.i.valor }
        );
        
        
    }
});