Значение не обновлено

Question

Я новичок в угловой и все еще борюсь с основами.

У меня есть значок корзины в моем меню с заданным значением до 0 при первой загрузке.

В списке продуктов у меня есть кнопка для каждого продукта, чтобы сказать «AddToCart». Итак, что я хочу -

Я хочу обновить значение корзины, когда я нажимаю кнопку AddToCart. Однако начальное значение корзины настраивается угловым, но я не могу ее обновить дальше.

Вот код-

var app = angular.module("productsApp", []) 
.factory("sharedService", ['$rootScope', function ($rootScope) { 
     var sharedServiceRef = { 
      cart: 0, 
      setCartValue: function (product) { 
       if (product) { 
        this.cart = this.cart + 1; 
        sharedServiceRef.cart = this.cart; 
       } 
       else { 
        sharedServiceRef.cart = 0; 
       } 
       console.log(sharedServiceRef.cart); 
      } 
     }; 
     return sharedServiceRef; 
    }]); 


function ProductListController($scope, sharedService) { 
    $scope.addItemToCart = function (product) { 
     sharedService.setCartValue(product); 
    } 
} 

function CartController($scope, sharedService) { 
    $scope.cart = sharedService.cart; 
} 

При начальной загрузке страницы она устанавливает значение корзину в view-

<div ng-controller="CartController"> 
     {{cart}} 
    </div> 

И когда я изменить значение в другой контроллер и установить его -

function ProductListController($scope, sharedService) { 
    $scope.addItemToCart = function (product) { 
     sharedService.setCartValue(product); 
    } 
} 

Это не обновляет значение корзины, оно остается 0 на первом месте.

Как обновить значение в угловом?

Редактировать Это мой вид, где добавить кнопка быть called-

<div ng-controller="ProductListController"> 
    <div ng-repeat="product in products"> 
     <span> 
      $ {{product.salePrice}} 
     </span> 
     <div> 
      <a ng-click="addItemToCart(product)"> 
       Add To Cart 
      </a> 
     </div> 
    </div> 
</div> 

Answer 1

Ваша ошибка была не угловая ошибка, но Javascript один.

Когда вы сделаете это: $scope.cart = sharedService.cart;

вы присваиваете значение не является ссылкой, другими словами, она является копией исходных значений, изменения, сделанные в sharedService.cart не будет влиять на переменную $scope.cart

В javascript примитивные переменные присваиваются значением значения, а объекты по ссылке, поэтому вы можете назначить объект $scope.cart

Здесь находится плунжер с примером его работы https://plnkr.co/edit/MKSofFcgEWMjwQaOvLsP?p=preview