AngularJS Html 未随工厂数据更改而更新

我从这个简单的plunkr开始

据我所知，它只使用一个组件。我有一个使用多个组件的项目。我有一个购物车，用户点击添加按钮将商品添加到所述购物车。结帐组件只是清空购物车。我希望当购物车为空时，显示屏也会清空，总数将显示 0.00，但事实并非如此。据我所知，HTML 只更改页面加载而不是数据更改，这就是问题所在，但我的理解是 angular 会自行处理这个问题。

提前致谢

相关代码：

app.config.js（此文件具有工厂和结帐功能）

'use strict';

angular.
  module('floorForceApp').
  config(['$routeProvider', '$provide',
    function config($routeProvider,$provide) {
      $routeProvider.
        when('/home', {
          template: '<home-page></home-page>'
        }).
        when('/floors', {
          template: '<floor-page></floor-page>'
        }).
        when('/cabinets', {
          template: '<cabinet-page></cabinet-page>'
        }).
        when('/walls', {
          template: '<wall-page></wall-page>'
        }).
        when('/checkout', {
          template: '<checkout-page></checkout-page>'
        }).
        otherwise('/home');

        
    
    },
  ]).factory('floorForceCart',function(){
    let total = 0;
    let addedItems = [];
    // let additem = function(item,price){
      
    // }

    return{
      addItems:function(item,count){
        let exist =false;

        $.each(addedItems,function(i,v){
          if(v.itemNo === item.itemNo){
            exist = true;
            v.count = v.count + count;
            total = total + (item.itemPrice*count);
          }
        });

        if(!exist){
          let toPush = {};
          toPush.itemNo = item.itemNo;
          toPush.count = count;
          toPush.itemName = item.itemName;
          toPush.itemPrice = item.itemPrice;
          addedItems.push(toPush);
          total = total + (item.itemPrice*count);
        }

        console.log("Cart:",addedItems);
        console.log("Total:",total);
      },
      removeItems: function(item,count){
        $.each(addedItems,function(i,v){
          if(v.itemNo === item.itemNo){
            v.count = v.count - count;
            total = total - (item.itemPrice * count);
            if(v.count == 0){
              addedItems.splice(i,0);
            }
          }
        });
      },
      getTotal:function(){
        return total;
      },
      getCart:function(){
        return addedItems;
      },
      checkout:function(){
        total = 0;
        addedItems = [];
        
        console.log("Check out successful.");
        console.log("Total:",total,"Cart:",addedItems);
        alert("Checkout Successful!");
      }
    };
  });

checkout-page.component.js（数据从工厂加载到这里）

'use strict';

angular.
    module('checkoutPage').
    component('checkoutPage',{
        templateUrl: 'checkout-page/checkout-page.template.html',
        controller: function checkOutController($scope,$http,floorForceCart){
            let self = this;
            $scope.total = floorForceCart.getTotal();
            $scope.cart = floorForceCart.getCart();


            $scope.checkOut = function(){
                floorForceCart.checkout();
            }
        }
    })

checkout-page.html（此页面显示结帐）

<div>
    <div style="height:30em;">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-sm-4 h-100 ">
                    <div class="row prodImage h-100"></div>
                </div>
                <div class="col-sm-8 h-100 ">
                    <div class="row h-100">
                        <div class="checkOutTitleDiv titleDiv">Checkout</div>
                        <div class="checkOutCartDiv paddingZero">
                            <div ng-repeat="item in cart" class="row marginAuto cartItemRow">
                                <div class="itemNameDiv col-sm-5">{{item.itemName}}</div>
                                <div class="itemPriceDiv col-sm-3">{{item.itemPrice|currency}}</div>
                                <div class="itemQuantityDiv col-sm-4">
                                    <div class="row">
                                        <div class="col-sm-4"></div>
                                        <div class="col-sm-4 itemQuantity">{{item.count}}</div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="checkOutButtonDiv paddingZero">
                            <div class="row h-100 marginAuto">
                                <div class="col-sm-4 cartTotalDiv">
                                    <div class="">Total:{{total|currency}}</div>
                                </div>
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <input class="checkOutButton btn btn-success" ng-click="checkOut()" type="button"value="Check Out"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>