title: Overriding custom angular directive css to d3 node on hover and click
body: <p>I'm working to override some custom css that has been added into a custom angular directive which uses D3 to build graphs. I want to override the default css upon hover and click, I'm able to get the events but the updated css only takes effect after the first hover and the first click. My directive implementation in the html looks like this:</p>
  
  <pre><code> &lt;diagram nodes="nodes" edges="edges" 
              on-node-clicked="onNodeClicked(id)" 
              on-node-hovered="onNodeHovered(id)"&gt;
  &lt;/diagram&gt;
  </code></pre>
  
  <p>In my angular controller I have:</p>
  
  <pre><code>$scope.onNodeHovered(id) {
          console.log(id);
          $('.original-metric').on({
              'mouseenter': function () {
                  console.log("hey there");
                  if ($('rect', this).css('stroke-width') !== '3px') {
                      $('rect', this).css('stroke-width', '1px');
                  }
              },
              'mouseleave': function () {
                  if ($('rect', this).css('stroke-width') !== '3px') {
                      $('rect', this).css('stroke-width', '0px');
                  }
              }
      });
  }
  
  $scope.onNodeClicked(id) {
       console.log(id);
      $('.original-metric, .dimension, .calculation, .calculation-input, .input-source').click(function () {
          $('rect', this).css('stroke-width', '3px');
      });
  
  }
  </code></pre>
  
  <p>I'm able to get the id of each node on the hover and click of the node. Essentially that event is passed outside of the diagram component, and the id of the hovered and clicked upon node is logged. So I know the functions in the controller are executing on the first hover and first click but the jquery is only applying after the first event for both hover and click.</p>
  
  <p>I have used ng-mouseover and that applys the css below on first hover and click but is there a way make it work with the code I have noted here?</p>
  
  <p>I tried adding $scope.$apply but that triggers a "digest already in progress" console error.</p>
  
  <p>How can I get the css styles defined in my jquery to take effect on first hover and first click?</p>
  
  <p>Thanks</p>