AngularJS Inicio

HTML

<div ng-app="Main">
    <div ng-view="">
    </div>
    <script type="text/ng-template" id="lista.html">
            <button ng-click="listarProductos()">
                Listar Productos
            </button>
            <a href="#/carro"> Ir al carro </a>
            <count></count>
            <div class="well"ng-repeat="producto in productos">
                {{producto.Producto}}
                {{producto.Precio | currency }}
                <img src="{{producto.Imagen}}" width="100" height="100"/>
                <button ng-click="agregar(producto.Id)">Comprar</button>
            </div>
</script>
     <script type="text/ng-template" id="carro.html">
          <a href="#/productos"> Volver </a>
            <count></count>
            <div class="well"ng-repeat="producto in productos">
                {{producto.Producto}}
                {{producto.Precio | currency }}
                <img src="{{producto.Imagen}}" width="100" height="100"/>
                <button ng-click="quitar(producto.Id)"> Quitar </button>
            </div>
</script>
</div>

CSS

</style> 
<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>

JavaScript

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

miCarrito.config(function($routeProvider){
    $routeProvider.
    when("/productos", {controller: 'ProductoController', templateUrl: 'lista.html'}).
    when("/carro", {controller: 'CarroController', templateUrl: 'carro.html'})
    .otherwise({ redirectTo: '/productos' });
});

miCarrito.controller('ProductoController', ['$scope', 'ProductosService',  function($scope, ProductosService){
    $scope.productos = [];
    $scope.cant = ProductosService.mostrarCantItems();
    $scope.listarProductos = function() { 
        $scope.productos = ProductosService.listar();
    }
    $scope.agregar = function (id){
        ProductosService.agregar(id);
        $scope.cant = ProductosService.mostrarCantItems();
    }
}]);
miCarrito.controller('CarroController', ['$scope', 'ProductosService',  function($scope, ProductosService){
    $scope.productos = [];
    $scope.productos = ProductosService.listarCarro();
        $scope.cant = ProductosService.mostrarCantItems();
    
    $scope.quitar = function (id) {
        ProductosService.quitar(id);
        $scope.cant = ProductosService.mostrarCantItems();
    }
}]);

miCarrito.factory('ProductosService', ['$http', 'eventHub', function($http, eventHub){
    var servicio = {},
        productosAgregados = [];
    
    var datos = [{"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",...