title: Two way data binding between controller and external directive
body: <h1>My setup:</h1>
  <p>Imagine a <em>controller</em> for a shopping cart:</p>
  <pre><code>app.controller('CartCtrl', function ($scope) {
      $scope.data = [
          {
              id:0,
              title:'article1'
          },
          {
              id:1,
              title:'article2'
          }
      ];
  
      $scope.countItems = function(){
          var num = 0;
          for(var i in $scope.data){
              num++
          }
          return num;
      } 
  });
  </code></pre>
  <p>It's used somewhere on the page:</p>
  <pre><code>&lt;ul ng-controller=&quot;CartCtrl&quot;&gt;
      &lt;li ng-repeat=&quot;item in data&quot;&gt;{{item.title}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><em>Somewhere else</em> I'd like to display the number of items in my cart:</p>
  <pre><code>&lt;div cart-item-number&gt;{{countItems()}}&lt;/div&gt;
  </code></pre>
  <p>To connect the data I use a <em>directive</em>:</p>
  <pre><code>app.directive('cartItemNumber', function() {
      return {
          restrict: 'A',
          controller: 'CartCtrl'
      };
  });
  </code></pre>
  <h1>My Question:</h1>
  <p><em>On page load the correct number is displayed</em>. However if I remove or add an item from/to the data-object the <em>cart-item-number does not update</em>.</p>
  <p><strong>How can I solve this issue?</strong></p>