title: How to trigger an event in AngularJS as in jQuery?
body: <p>Is it possible to do something like <code>$("#container").trigger("click");</code> using only AngularJS ? And if it's not possible to <code>trigger</code>, is there another way to manage this behavior ?</p>
  
  <p>I have a basic example that creates a box on a button click. The created box is draggable. Now, currently the user has to click on the button (to create the box) and click again to drag the box. I would like the user to simply click once : to create the box and then trigger the drag event of the box so that the user doesn't have to click again.</p>
  
  <pre><code>var app = angular.module("app", []);
  
  // This directive is attached to the button and makes it create a box every time the is a 'mousedown' event
  app.directive("boxCreator", function($document, $compile) {
      return {
          restrict: 'A',
          link: function($scope, $element, $attrs) {
              $element.bind("mousedown", function($event) {
                  var newNode = $compile('&lt;div class="box" drag&gt;&lt;/div&gt;')($scope);
  
                  newNode.css({
                      top: $event.pageY - 25 + "px",
                      left: $event.pageX - 25 + "px"
                      });
  
                  angular.element($document[0].body).append(newNode);
                  // I'd like to do something like : '$(newNode).trigger("mousedown");'
              });
          }
      }
  });
  
  // Makes the binded element draggable
  app.directive("drag", function($document) {
      return function(scope, element, attr) {
          var startX = 0, startY = 0, x = event.pageX - 25, y = event.pageY - 25;
  
          element.css({
           position: 'absolute',
           cursor: 'pointer'
          });
  
          element.on('mousedown', function(event) {
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
          });
  
          function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
            element.css({
              top: y + 'px',
              left:  x + 'px'
            });
          }
  
          function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
          }
        };
      });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/Lfojcw8f/" rel="noreferrer">JSFIDDLE</a></strong></p>