title: Defer angularjs watch execution after $digest (raising DOM event)
body: <p>I have a watch that triggers a DOM event:</p>
  
  <pre><code>scope.$watch(function() { return controller.selected; }, function(selected) {
      if (selected) {
          $input.trigger('focus');
      }
  });
  </code></pre>
  
  <p>The issue is that I have a handler on 'focus' that does a <code>scope.$apply</code>.</p>
  
  <pre><code>$input.bind('focus', function() {
      scope.$apply(function() { controller.focused = true; });
  });
  </code></pre>
  
  <p>So when my <code>$watch</code> is fired from inside a <code>$digest</code> it causes an error because it tries to trigger another <code>$digest</code>.</p>
  
  <p>The workaround I have is to put the trigger in a <code>$timeout</code>.</p>
  
  <pre><code>scope.$watch(function() { return controller.selected; }, function(selected) {
      if (selected) {
          $timeout(function() { $input.trigger('focus'); });
      }
  });
  </code></pre>
  
  <p>This works ... so far.  Is this the proper way to handle this?  I'm not sure if this catches every case and would like to see if there is an angular approved way to have a piece of code defer for after the digest.</p>
  
  <p>Thanks!</p>