<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="angular-route@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
    <script data-require="angular-resource@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-resource.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-view=""></div>
  </body>

</html>
(function () {

    var app = angular.module('app', ['ngRoute', 'ngResource']);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/items', {
            templateUrl: 'items.html',
            controller: 'ItemsCtrl'
        }).when('/payment', {
            templateUrl: 'payment.html',
            controller: 'PaymentCtrl'
        }).otherwise({
            redirectTo: '/items'
        });
    }]);

    app.service('Items', ['$resource', function ($resource) {
        return $resource('items.json');
    }]);

    app.controller('ItemsCtrl', ['$scope', 'Items', function ($scope, Items) {
        $scope.items = Items.query();

        $scope.selectedIDs = function () {
            return $scope.items.filter(function (item) {
                return item.selected;
            }).map(function (item) {
                return item.id;
            //}).join('&id=');
            }).join(',');
        };

    }]);

    app.controller('PaymentCtrl', [
        '$scope', '$routeParams', 'Items',
        function ($scope, $routeParams, Items) {

            //var id = $routeParams.id;
            //id = typeof id === 'string' ? [id] : id;
            var id = $routeParams.id.split(',');

            $scope.items = [];

            Items.query(function (items) {
                $scope.items = items.filter(function (item) {
                    return ~id.indexOf(item.id + '');
                });
            });

            $scope.totalPrice = function () {
                return $scope.items.reduce(function (sum, item) {
                    return sum + item.price;
                }, 0);
            };
        }
    ]);

})();
/* Styles go here */

<h1>Item list</h1>

<table>
    <tr ng-repeat="item in items">
        <td><input type="checkbox" ng-model="item.selected"/></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><a href="#/payment?id={{item.id}}">Buy</a></td>
    </tr>
</table>

<a href="#/payment?id={{selectedIDs()}}">
    Buy selected (#/payment?id={{selectedIDs()}})
</a>
<h1>Your items</h1>

<ul>
    <li ng-repeat="item in items">
        <b>{{item.name}}: </b>{{item.price}}<br/>
    </li>
</ul>

Total price: {{totalPrice()}}
[
  { "id": 1, "name": "book", "price": 68},
  { "id": 2, "name": "pen", "price": 14},
  { "id": 3, "name": "paper", "price": 24},
  { "id": 4, "name": "shirt", "price": 109},
  { "id": 5, "name": "tie", "price": 137}
]