javascript - ng-repeat not updating after change in nestled data -

I have a command that draws something using d3.js and if I want to draw it, it's in my realm Depends on the data. My problem is that I can not do things again after changing it, I have tried variants with $ scope. $ Are applied and no success has been found so far.

HTML:

& lt; Body ng-app = "app" ng-controller = "main" & gt; & Lt; Div ng-repeat = "value in data" & gt; & Lt; Div draw = "" value = "{{val.avg}}" & gt; {{Val.avg}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;

JS:

  var app = angular Module ('app', []); App.controller ('mainctrl', function ($ radius, $ timeout) {$ scope.data = [{avg: 0}, {avg: 1}] $ timeout (function () {var i = 1; $ Key in $ Scope.data) {$ scope.data [key] .avg = i ++;};}, 3000)}); App.directive ("draw", function () {return: {scope: {value: "@"}, link: function (scope, element, etter) {if (attrs.value! = 0) {var svgContainer = d3 Ent ("width", 200) .attr ("height", 200); var circle = svgContainer.append ("circle") atri ("cx", 30) .attr ("cy", 30) .attr (" R ", 20);}}}});  

Is there a planner reproducing this problem:?

Change your directions:

  app.directive ('draws' 'Function (scope, element, attrs) {scope. $ Watch ("value", function (val) {return} {value: {value: "=" // <->}, link: function {// Drag the bag with Val}}}}}  

}

and your HTML:

   { {Val.avg}}  gt; & lt; / div & gt; & lt; / body & gt;  

has been updated to Plunkr: