Integration of angular and d3, a simple example of data binding

Question

I'm having trouble writing a simple directive that updates d3 positions in a circle using angle characters.

Here is an example - http://jsfiddle.net/hKxmJ/3/

This is the model:

app.controller('AppCtrl', function ($scope) { $scope.d = [5, 10, 70, 6, 40, 45, 80, 30, 25]; }); 

what the example should do is the ability to update the position of the circle and the text next to the input when changing the number in the input field. nothing works right now, except for the initial loading of the directive.

Update

http://jsfiddle.net/hKxmJ/5/

I changed my scope to

 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}]; }); 

and the text is updated, but the clock in the directive is still not updated.

Answer 1

I managed to find help on google forums - https://groups.google.com/forum/?fromgroups=#!topic/angular/NblckkSF6EM

it turns out that you can pass an optional objectEquality argument to the scope (http://docs.angularjs.org/api/ng.pyroScope.Scope)

 objectEquality (optional) – {boolean=} – Compare object for equality rather than for reference. 

and now the clock function will work.

  scope.$watch(attr.ghBind, function(value){ vis.selectAll("circle").data(value) .attr("cy", function(d){return dv;}); } , true); 

the script is here: http://jsfiddle.net/hKxmJ/6/

Update

I also managed to create two-way data binding with the mouse to update data points. The key is to track the position of the mouse, and then update the position of the position using the inverse function, then call the scope. $ Apply (). This is highlighted here:

  .on('drag', function(d, i) { var sel = d3.select('.drag'), cy = sel.attr('cy'); sel.attr('cy', parseInt(cy)+d3.event.dy); // Update mouse postion dv = height-Math.round(cy); // Calculate value using an inverse function scope.$apply(); // Call scope.$apply() console.log(d,i,cy); }) 

The fiddle is here: http://jsfiddle.net/hKxmJ/7/