<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> </head> <body> <div ng-controller="CartController"> <div ng-repeat="item in items"> <span>{{item.title}}</span> <input type="text" ng-model="item.quantity"> <span>{{item.price | currency}}</span> <span>{{item.price*item.quantity | currency}}</span> </div> <div>Total: {{totalCart() | currency}}</div> <div>Discount: {{bill.discount | currency}}</div> <div>Subtotal {{bill.subtotal | currency}}</div> </div> <script> function CartController($scope) { $scope.bill = {}; $scope.items = [{title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95}]; $scope.totalCart = function () { var total = 0; for (var i = 0; i< $scope.items.length; i++) { total += $scope.items[i].price*$scope.items[i].quantity; } return total; } var calculateTotals = function () { var total = 0; for (var i = 0; i < $scope.items.length; i++) { total += $scope.items[i].price*$scope.items[i].quantity; } $scope.bill.totalCart = total; $scope.bill.discount = total > 100 ? 10 : 0; $scope.bill.subtotal = total - $scope.bill.discount; } $scope.$watch('items', calculateTotals, true); }