title: Updating an Angular model from a mouse drag event
body: <p>When I drag an element that I have drawn on a canvas, I would also like its live <code>x</code> and <code>y</code> coordinates to be shown outside of the canvas.</p>
  
  <p>A quick description..</p>
  
  <p>View:</p>
  
  <pre><code>//some HTML, including a canvas
  {{xCoord}} &lt;/br&gt;
  {{yCoord}}
  </code></pre>
  
  <p>Directive: (<code>onDrag()</code> is called whenever the user clicks on and drags an object)</p>
  
  <pre><code>someCanvasObject.onDrag() {
      $scope.xCoord = canvasObject.x;
      $scope.yCoord = canvasObject.y;
      $scope.$digest();
  }
  </code></pre>
  
  <p>However, when I use <code>$scope.$digest()</code> to change the outputted coordinates, I get an <strong>"$apply is already in progress"</strong> error because <code>$digest()</code> is called in quick succession by the drag rapidly modifying the coordinates.</p>
  
  <p>Is there an alternative way to use <code>$digest()</code> that will not conflict when used rapidly in the way described above?</p>
  
  <p>(I've been told <code>$$phase</code> is bad practice.)</p>