AngularJS Example: Carrito Compra

HTML

<div data-ng-app="MiCarrito">
    <div class="well container-fluid" ng-controller="CarritoController">
        <div class="row-fluid">
            <div class="span7 row">
            <h1>{{titulo}}</h1>
                <h3>Productos</h3>
                <div class="well span3" ng-repeat="producto in productos">
                    <h4>{{producto.Producto}}</h4>
                    <img class="" title="{{producto.Producto}}" 
                    src="{{producto.Imagen}}" />
                    <button class="btn btn-info btn-block" ng-click="agregar(producto)"> 
                        <i class="icon-plus-sign"></i>
                        Precio: {{formatoMoneda(producto.Precio)}}
                    </button>
                </div>
            </div>
            <br/>
            <div class="span5">
                <h3>Carrito</h3>
        
                <table class="table table-striped">
                    <caption>Carrito</caption>
                    <thead>
                        <tr>
                            <th class="span1">Id</th>
                            <th class="span5">Producto</th>
                            <th class="span2">Cantidad</th>
                            <th class="span2">Precio</th>
                            <th class="span2">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="well" ng-repeat="item in carrito">
                            <td>{{item.Producto.Id}}</td>
                            <td>{{item.Producto.Producto}}</td>
                            <td>
                                <input type="text" ng-model="item.Cantidad" />
                            </td>
                            <td>S/. {{formatoMoneda(item.Producto.Precio)}}</td>
                            <td>S/. {{formatoMoneda(item.Cantidad * item.Producto.Precio)}}</td>
                        </tr>
                    </tbody>
                </table>
           ...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <style>
html img{ width: 200px; height: 150px; }

JavaScript

var miCarrito = angular.module("MiCarrito", []);

miCarrito.controller(
    'CarritoController', ['$scope',

function ($scope) {
    $scope.titulo = "Tienda De Todo";
    $scope.usuario = "Anonimo";
    $scope.carrito = [];
    
    $scope.agregar = function (p) {
        var itemActual;

        for (var i = 0; i < $scope.carrito.length; i++) {
            if ($scope.carrito[i].Producto.Id == p.Id) {
                itemActual = $scope.carrito[i];
            }
        }

        if (!itemActual) {
            $scope.carrito.push({
                Producto: p,
                Cantidad: 1
            });
        } else {
            itemActual.Cantidad++;
        }
    }
    
    $scope.formatoMoneda = function(valor){
        var valor = parseFloat(valor);
        return "S/." + Math.floor(valor) + "." + (valor * 100) % 100;
    }

    $scope.productos = [{"Id": "1", "Categoria": "Librería", "Producto": "Borrador Perfecto", "Precio": "0.5", "Imagen": "http://images.wikia.com/inciclopedia/images/5/57/Borrador.jpg"},
{"Id": "2", "Categoria": "Librería", "Producto": "Lápiz Carboncito", "Precio": "1", "Imagen": "http://cd1.dibujos.net/dibujos/pintados/201110/45bdaddccd13fdcfd61764cc91302190.png"},
{"Id": "3", "Categoria": "Librería", "Producto": "Regla Rectitud", "Precio": "1.2", "Imagen": "http://us.123rf.com/400wm/400/400/wayoutwest/wayoutwest0705/wayoutwest070500013/912524-una-regla-de-madera-de-30-centimetros-aislada-en-un-fondo-blanco-muevalo-de-un-tiron-encima-para-una.jpg"},
{"Id": "4", "Categoria": "Baño", "Producto": "Jabón Cochinin", "Precio": "1.5", "Imagen": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Tualetsapo.jpg/200px-Tualetsapo.jpg"},
{"Id": "5", "Categoria": "Baño", "Producto": "Papel Higienico", "Precio": "0.7", "Imagen": "http://sobrecuriosidades.com/wp-content/uploads/2011/12/papel-higienico.jpg"},
{"Id": "6", "Categoria": "Alimentos", "Producto": "Leche Gloria", "Precio": "2.5", "Imagen":...