javascript - Angular service variable not updated in the view -

i have following service:

app.service('cart', function() {     this.data = [];     this.addfont = function(font) { return this.data.push(font) };     this.removefont = function(i) { return this.data.splice(i, 1); };     this.count = function() { return this.data.length; }; }); 

and following directive, displays cart icon number of items in it:

app.directive('cartbutton', ['cart', function(cart) {     return {         restrict: 'e',         replace: true,         template: '<button class="selection"><i class="fa fa-shopping-cart"></i> {{ cart.count() }}</button>'     }; }]); 

but counter doesn't work, , there no error.

how access cart.count() inside directive?

angular expressions evaluated against scope.

try set function on scope count cart:

return {     restrict: 'e',     replace: true,     template: '<button class="selection"><i class="fa fa-shopping-cart"></i> {{ getcartcount() }}</button>',     link: function(scope) {         scope.getcartcount = function() {             return cart.count();         }     } };