title: Integrating angularjs and d3, simple data-binding example
body: <p>I'm having problems writing a simple directive that updates d3 circle positions using angularjs.</p>
  
  <p>Here is the example - <a href="http://jsfiddle.net/hKxmJ/3/" rel="nofollow">http://jsfiddle.net/hKxmJ/3/</a></p>
  
  <p>This is the model:</p>
  
  <pre><code> app.controller('AppCtrl', function ($scope) {
     $scope.d = [5, 10, 70, 6, 40, 45, 80, 30, 25];
   });
  </code></pre>
  
  <p>what the example should do is to be able to update both the circle position and the text next to the input when the number in the input box changes. right now, nothing works except for the initial loading of the directive.</p>
  
  <h3>update</h3>
  
  <p><a href="http://jsfiddle.net/hKxmJ/5/" rel="nofollow">http://jsfiddle.net/hKxmJ/5/</a></p>
  
  <p>I've changed my scope to </p>
  
  <pre><code>app.controller('AppCtrl', function ($scope) {
    $scope.d = [{v: 5}, {v: 10}, {v: 70}, {v: 6}, {v: 40}, {v: 45}, {v: 80}, {v: 30}, {v: 25}];
  });
  </code></pre>
  
  <p>and the text is updating but the watch on the directive is still not updating.</p>