AngularJS II Carrito Compra

HTML

<div data-ng-app="MiCarrito">
    <div class="well container-fluid">
        <h1>Nombre de la Tienda</h1>
        <div ng-view=""></div>
    </div>
    <script type="text/ng-template" id="productos.html">
        <h3>Productos</h3>
        <a href="#/carrito">Ir al carrito</a><br/>
        <div class="well span3" ng-repeat="p in productos">
            <h4>{{ p.Producto }}</h4>
            <img class="" title="alternativoImagen" 
            src="{{ p.Imagen }}" />
            <button class="btn btn-info btn-block" ng-click="agregar(p)"> 
                <i class="icon-plus-sign"></i>
                Precio: {{ p.Precio | monedaPeruana }}
            </button>
        </div>
    </script>
    <script type="text/ng-template" id="carrito.html">
        <h3>Carrito</h3>
        <a href="#/producto">Ir al listado</a><br/>
        <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.Id}}</td>
                    <td>{{item.Producto}}</td>
                    <td>
                        <input type="text" name="cantidad" ng-model="item.Cantidad" />
                    </td>
                    <td>{{item.Precio | currency}}</td>
                    <td>{{item.Cantidad * item.Precio | currency}}</td>
                </tr>
            </tbody>
        </table>
    </script>
</div>

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.config(function($routeProvider){
    $routeProvider
    .when("/producto", {
        controller:"ProductoController", templateUrl:"productos.html"
    })
    .when("/carrito", {
        controller:"CarritoController", templateUrl:"carrito.html"
    })
    .otherwise({redirectTo:'/producto'});
});

miCarrito.filter("monedaPeruana", function(){
    return function(input){
        return "S/." + input;
    }
});

miCarrito.controller("ProductoController", ['$scope', 'ProductosSvc', 'CarritoSvc',

function ($scope, ProductosSvc, CarritoSvc) {
    
    $scope.carrito = CarritoSvc.carrito;
    
    $scope.agregar = function(p) {
        var producto = angular.copy(p);
        producto.Cantidad = 1;
        $scope.carrito.push(producto);
    }
    
    $scope.productos = ProductosSvc.listar();

}]);

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

function ($scope, CarritoSvc) {
    
    $scope.carrito = CarritoSvc.carrito;

}]);

miCarrito.factory("CarritoSvc", function() {
    return {
        carrito: []
    };
});

miCarrito.factory("ProductosSvc", function(){
    var instance = {};
    instance.listar = function() {
        return [{"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":...