<!doctype html>
<html lang='en' ng-app>
<head>
  <title>Twój koszyk na zakupy</title>
  <link href="bootstrap.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="CartController">
    <div ng-repeat="item in items">
      <span>{{item.title}}</span>
      <input ng-model="item.quantity">
      <span>{{item.price | currency}}</span>
      <span>{{item.price * item.quantity | currency}}</span>
    </div>
    <div>Wartość całkowita: {{bill.total | currency}}</div>
    <div>Rabat: {{bill.discount | currency}}</div>
    <div>Wartość po rabacie: {{bill.subtotal | currency}}</div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
  <script>
    function CartController($scope) {
      $scope.bill = {};

      $scope.items = [
        {title: 'Farby', quantity: 8, price: 3.95},
        {title: 'Sukienka w kropki', quantity: 17, price: 12.95},
        {title: 'Kryształ górski', quantity: 5, price: 6.95}
      ];

      var calculateTotals = function() {
        var total = 0;
        for (var i = 0, len = $scope.items.length; i < len; i++) {
          total = total + $scope.items[i].price * $scope.items[i].quantity;
        }
        $scope.bill.total = total;
        $scope.bill.discount = total > 100 ? 10 : 0;
        $scope.bill.subtotal = total - $scope.bill.discount;
      };

      $scope.$watch('items', calculateTotals, true);
    }
  </script>
</body>
</html>
