title: Why D3 events that deal AngularJS models does not have effect in binding?
body: <p>Consider the following controller of Angular JS (1.5.8). This project uses also WebCola 3.1.3 and d3 3.4.11.</p>
  
  <p>When I try to change any property of my $scope from inside a d3 callback handler function, the binding takes no effect in rendered HTML. </p>
  
  <p>How can I figure out how to prevent this behavior from d3 and let the 2-way binding flows normally?</p>
  
  <pre><code>&lt;div ng-controller="MainController"&gt;
      &lt;h2&gt;{{balls[0].a}}&lt;/h2&gt;
      &lt;button ng-click="foo()"&gt;Do it!&lt;/button&gt;
  &lt;/div&gt;
  
  angular.module('nua').controller('MainController', ['$scope'], function ($scope) {
  
      $scope.balls = [];
  
      $scope.onCircleClickHandler = function (data, index) {
  
          $scope.balls[index].a = 2;
  
          // The problem is here!
          // Every function of d3 that change the value
          // of any scope property takes no effect in binding
  
          // No one of my tries to change the value of any 
          // property of $scope.balls to see the rendered result
          // in the &lt;h2&gt; takes effect.
  
          // The value of $scope.balls[index].a is really
          // updated to "2", but the values of &lt;h2&gt; remains "1".
  
          // The calling from D3 seems to prevent something that affects binding.
  
      };
  
      $scope.foo = function () {
  
          $scope.balls[1].d = 5;
  
          // This works properly.
  
          // If I call onCircleClickHandler and THEN call foo,
          // then the binding takes effect and &lt;h2&gt; has now the 
          // "2" as innerHTML
  
      };
  
      $scope.init = function () {
  
          // var mycola = cola.d3adaptor() ...
  
          // var svg = d3.select('id') ...
  
          // var nodes = svg.selectAll('circle') ...
  
          nodes.on('click', function (data, index) {
  
              this.onCircleClickHandler(data, index);
  
          }.bind($scope))
  
          $scope.balls = [
              {a:1, b:2, c:3},
              {d:4, e:5, f:6}
          ];
  
      };
  
  
  });
  </code></pre>