javascript closure or not (while using angularjs directive and d3js) -

inspired example angular directive 2-way binding, made simple directive, once clicked change value on parent scope codepen live.

.directive("haha", function() { return {   scope: {     v: '='   },   template: `<div ng-click="myfun()">click me now</div>`,   link: function(scope, element) {     scope.myfun = function() {       scope.v  = "clicked";     }          } } }); 

now add svg circle drawn d3 inside "link", , try add similar event handler d3.on

d3.select(element[0]).append("svg").attr({width:300,height:300})       .append("circle").attr({cx:100,cy:100,r:20})       .on("click",function(){scope.v="clicked inside d3"; alert(scope.v)}); 

when click circle, {{value}} on html page doesn't change. codepen live

isn't correct, javascript closure rule, inside on("click", function() ..., scope.v should still same scope link: function(scope...

you need add scope.$apply since updating scope "outside" "angular world" , want angular run digest cycle.

d3.select(element[0]).append("svg").attr({width:300,height:300})       .append("circle").attr({cx:100,cy:100,r:20})       .on("click",function(){scope.$apply(function(){scope.v="clicked inside d3";})}); 

codepen.