title: angularjs call watch when 2 arrays have been updated
body: <p>I have made an angularjs directive for drawing a d3 force-directed graph. This graph gets updated periodically with new nodes and links.</p>
  
  <p>Recently, I have noticed that when the graph gets updated, it is redrawn 2x which takes a lot of time.  Part of that is because I have to first update the node array, and then the edges array, and each trigger a redraw.  I would like watch to be called after BOTH have been updated.  </p>
  
  <p>I have seen a lot of questions for how to deal with watch for an <code>OR</code> relationship, but <strong>I specifically only want redraw to happen after BOTH nodes <code>AND</code> links have been updated.</strong></p>
  
  <p>Here is my current directive:</p>
  
  <pre class="lang-js prettyprint-override"><code>graphs.directive('myGraph', [function () {
  
      function renderGraph(scope, elem) {
  
          drawGraph(scope.data, scope.data.params || {}, elem);
  
          scope.$watchCollection('data', function (newData) {
              drawGraph(newData, scope.data.params || {}, elem);
          });
      }
  
      function drawGraph(data, params, elem) {
  
          const rawSvg = elem.find(".svg")[0];
  
          forceDirectedGraph.create(data.nodes, data.links, data.nodeTypes, rawSvg, params);
      }
  
      return {
          scope: {
              data: '='
          },
          templateUrl: 'graph.html',
          link: renderGraph
      }
  }]);
  </code></pre>
  
  <p>And here is how I update the graph:</p>
  
  <pre class="lang-js prettyprint-override"><code>//initialization code:
  $scope.graph = { links:[], nodes:[], params:{ /*stuff*/} }
  
  //graph update code:
  $http.get(url).then( function(response) {
      links = [];
      nodes = [];
  
      //process and format links and nodes for d3 from request
  
      $scope.graph.links = links;
      $scope.graph.nodes = nodes;
  
  });
  </code></pre>