title: AngularJS: cleanest way to fix jQuery bug without updating the DOM in the controller
body: <p>I happened to hit <a href="https://stackoverflow.com/questions/16460182/remove-a-dragged-element-and-reset-cursor-with-jquery">this bug</a> in my Angular app (which uses <a href="https://stackoverflow.com/questions/16460182/remove-a-dragged-element-and-reset-cursor-with-jquery">Codef0rmer's dragdrop wrapper</a> around jQuery UI's draggable.</p>
  
  <p>It's SO tempting to put the prevailing best solution from that SO answer</p>
  
  <pre><code>$('body').css('cursor', 'auto');
  </code></pre>
  
  <p>at the end of my controller function that handles the <code>stop</code> event. </p>
  
  <p>It's quick, simple, works like a charm and is unlikely to cause issues because it doesn't update models or bits of the DOM linked to the models. </p>
  
  <p>On the other hand, I fear the Angular police will come after me.</p>
  
  <p>So what's the "Angular" way to do this?  </p>
  
  <p>If Codef0rmer's wrapper was my own, I'd just hack in the fix there. But I don't want to mess with that plugin. So my default answer would be</p>
  
  <ul>
  <li>In the <code>stop</code> event function in the controller, set a <code>dragStopped</code> flag instead</li>
  <li>Create a whole directive that listens to <code>dragStopped</code> to change the CSS property, and </li>
  <li>Add that directive to every draggable element</li>
  </ul>
  
  <p>But this seems ridiculous overkill</p>