I am facing a situation where I have a model on my scope that consists of an object with nested objects. Although I have come across this solution, what I really want is to trigger this action directly from the template, especially because I have a specific filter set up for it.
var App = angular.module('app', []);
App.controller('myCtrl', function($scope) {
$scope.items = {
{ name: 'Cricket bat', cost: '2500', quantity: 0},
{ name: 'Football', cost: '1100', quantity: 0}
};
$scope.cartItems = {}; // This object holds the items individually rather than as an array.
In addition, I have created a custom filter called getPrice which is responsible for calculating the total price based on the items in the user's cart.
Now, when looking at the template:
{{ cartItems | getPrice }}
The question arises - is there a way to automatically update the template whenever one of the nested object values changes, like changing the quantity of an item in the cart? If so, how can this be achieved?