How can I in AngularJs set the value of one directive when an button is clicked

I have some comments in my code. But here is the basics of it. I have a span and I have a button. When the button is clicked I want to update the html of the span. The span is bound to the value of a controllers property. I tried using a model but it was not working either. Here is my code

app.controller('CartController', function($scope) {
  this.count = 0;

  this.getCount = function() {
    return count;
  };
  this.addProduct = function() {
    this.count = this.count + 1;
    return this.count;
  };
});

//this is a span with a value set to the number of items in the cart
app.directive('cartCount', function() {
  return {
    restrict: 'A',
    controller: 'CartController',
    template: '<span>{{count}}</span>',
    transclude: true,
    link: function(scope, element, attrs, CartController) {

      //I can initially set the value 
      scope.count = CartController.count;

      //but later how do I watch the value of the CartControllers count property and sync it with the value of this?
    }
  };
});

//this is a button
app.directive('addProduct', function() {
  return {
    restrict: 'C',
    controller: 'CartController',
    link: function(scope, element, attrs, CartController) {

      //when button is clicked I want the cartCount directives value to be updated 
      element.click(function() { 

      });
    }
  };
});