Data-GPS-Draggable Not Displaying Properly -- AngularJS -

I am able to drag and drop between two tables in a single view, successfully displays this data, as That should be at all times, except for the first time to try drag-and-drop after page load.

What type of causes are there in AngularJS? I'm unable to find solutions. Here is my code:

  function drop-mark (drag ELL, drop AL) {var draggascope = angular. Element (drag allele). Scope (); Var dropScope = angular.element (dropEl) .scope (); (DragScope.planDesign) {var mchPlan = {CUSTOMERNUMBER if: vm.customer.CustomerNumber, PlanCode: dragScope.planDesign.PlanCode, ContractNumber: dragScope.planDesign.ContractNumber, PlanEffectiveDate :. Add new moment () ('M', 1) .startOf ('month'), PlanStatusDate:. Vm.changeEffectiveDate, PlanStatus: new moment () ('m', 1) .startOf ('month'), changeEffectiveDate add 'a'} mch2 = replicatedDataService.createEntity ('MCH2', mcpnl) vm.mchPlans.push (MC2); } $ Range $ Applied (); }  

Here is my HTML table:

  & lt; Table class = "table" data-gps-droppable = "vm.dropOnMch (dragEl, dropEl)" & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; & Lt; / Th & gt; & Lt; Th & gt; Customer number & lt; / Th & gt; & Lt; Th & gt; PlanCode & lt; / Th & gt; & Lt; Th & gt; Contract No. & lt; / Th & gt; & Lt; Th & gt; Plan effective date & lt; / Th & gt; & Lt; Th & gt; Status & lt; / Th & gt; & Lt; Th & gt; Date Date & lt; / Th & gt; & Lt; Th & gt; Confidence Number & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tr ng-repeat = "vm.mchPlans in plan" & gt; & Lt; TD & gt; & Lt; I class = "dad dad-bar" ng-click = "vm.remove (plan)" & gt; & Lt; / I & gt; & Lt; / TD & gt; & Lt; Td> & Lt; Span ng-bind = "plan.CustomerNumber" & gt; & Lt; / Span & gt; & Lt; / Td> & Lt; Td> & Lt; Span ng-bind = "plan.PlanCode" /> & Lt; / TD & gt; & Lt; Td> & Lt; Span ng-bind = "plan.ContractNumber" /> & Lt; / TD & gt; & Lt; Td> & Lt; Input type = "date" ng-model = "plan.PlanEffectiveDate" z-validate /> & Lt; / TD & gt; & Lt; TD & gt; & Lt; Selection NG Model = "plan.PlanStatus" ng-option = z Verify / & gt; position for position in "vm.planStatuses"; & Lt; / TD & gt; & Lt; Td> & Lt; Input type = "date" ng-model = "plan.PlanStatusDate" z-validate /> & Lt; / TD & gt; & Lt; Td> & Lt; Input type = "text" ng-model = "plan.TrustNumber" z-valid /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td colspan = "99" & gt; Drop plans to add them here & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; "Text" itemprop = "text"> 
 
 
 
 
 
  
  
  Is to put / P> 
  var manager = new air Entity Manager ("API / Wind"); Function fetchMetadata () {if (manager.metadataStore.isEmpty ()) {return manager.fetchMetadata (); } Return Q.resolve (); }