title: Angular drop from external source
body: <p>My angular app needs to accept text dropped from an external source...text document, web page, etc. (Similar to dropping in a textarea). I've been unable to find anything so far that accepts data from outside the browser, only modules such as <a href="https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html" rel="nofollow">ngDraggable</a> which allow UI elements to be dragged &amp; dropped, but don't seem to accept data from outside. ngDraggable is the only one I've tried, but I've checked out the demos of several other modules and none of them accept outside data.</p>
  
  <p>I'm looking for the drop to fire an event which will open a modal and place the dropped text into a text box on the modal form. Desired behavior can be simulated in <a href="https://moqups.com/vnc_dev/YIhMbQGp" rel="nofollow">this mockup</a> by clicking the plus sign in the middle of the form.</p>
  
  <p>If I can get help to the point where the event is fired and the drop data is available in a variable, I believe I can do the rest.</p>
  
  <p>app.js:</p>
  
  <pre><code>'use strict';
  
  /**
   * @ngdoc overview
   * @name producerApp
   * @description
   * # producerApp
   *
   * Main module of the application.
   */
  angular
    .module('producerApp', [
      'ngAnimate',
      'ngCookies',
      'ngResource',
      'ngRoute',
      'ngSanitize',
      'ngTouch',
      'ngDraggable'
    ])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p>main.html</p>
  
  <pre><code>&lt;div class="container"&gt;
  Container
  &lt;hr /&gt;
  &lt;div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" &gt;
    Drop area
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>main.js:</p>
  
  <pre><code>'use strict';
  
  /**
   * @ngdoc function
   * @name producerApp.controller:MainCtrl
   * @description
   * # MainCtrl
   * Controller of the producerApp
   */
  angular.module('producerApp')
    .controller('MainCtrl', function ($scope) {
      $scope.onDragComplete=function(data,evt){
         console.log("drag success, data:", data);
      }
      $scope.onDropComplete=function(data,evt){
          console.log("drop success, data:", data);
      }
   });
  </code></pre>