title: Angular ui-calendar drag and drop object
body: <p>i'm trying to use the <a href="http://angular-ui.github.io/ui-calendar/" rel="nofollow noreferrer">angular-ui-calendar</a> together <a href="http://codef0rmer.github.io/angular-dragdrop" rel="nofollow noreferrer">angular-dragDrop</a> to create something like the example from <a href="http://fullcalendar.io/js/fullcalendar-2.3.1/demos/external-dragging.html" rel="nofollow noreferrer">fullcalendar</a>, where it's possible to drag external event into the calendar.<br>
   I already checked the <a href="https://stackoverflow.com/q/22368621/3038067">How to drag&amp;drop elements onto a calendar with angular directives only</a> thread, but i could not figured out how to get the object that I dropped into the callendar and add to event's array.
  <br>
  <a href="http://plnkr.co/edit/oZAEPI6Cj9vkNbXoDcIf?p=preview" rel="nofollow noreferrer">Here is my trying</a></p>
  
  <ul>
  <li><p>The view</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div id="external-events"&gt;
          &lt;h4&gt;Draggable Events&lt;/h4&gt;
          &lt;label ng-repeat="item in eventList"&gt;
               &lt;div class="fc-event" data-drag="true" 
                    data-jqyoui-options="{revert: 'invalid'}"  
                    jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}"&gt;{{item.title}}&lt;/div&gt;
           &lt;/label&gt;
  
  
        &lt;/div&gt;
        &lt;br /&gt;
       &lt;div style="clear:both"&gt;&lt;/div&gt;
       &lt;div class="calendar" 
            ng-model="eventSources" 
            calendar="myCalendar1" 
            ui-calendar="uiConfig.calendar"
            data-drop="true" 
           jqyoui-droppable="{multiple:true}"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p></li>
  <li><p>The controller</p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
  
  
     var date = new Date();
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
  
  
     $scope.eventList=[
             {title:'Event 1'},
             {title:'Event 2'},
             {title:'Event 3'},
             {title:'Event 4'}
      ];
  
     $scope.eventSources=[];
  
     $scope.events = [
            {title: 'All Day Event',start: new Date(y, m, 1)},
            {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
            {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
      ];
  
      $scope.uiConfig = {
          calendar:{
              height: 450,
              editable: true,
              droppable: true,
              drop: function (date, allDay, jsEvent, ui) {
                  console.log('Here ,but where is the object?');
              },
           header:{
               left: 'title',
               center: '',
               right: 'today prev,next'
           }
         }
   };
  
   $scope.eventSources = [$scope.events];
  </code></pre>
  
  <p>}</p></li>
  </ul>
  
  <p>Thanks in advance for the help </p>