angularjs - jsPlumb + Angular - anchor/endPoint doesn't gets attached to the element that it shows up some where outside the container -

as can see above, anchor/endpoint in jsplumb doesnt work intended. ideally endpointurl , input should connected. but, get, weird. not sure issue. using vanilla jsplumb angular js. following simple code had used in controller of angularjs.

    var e1 = jsplumb.addendpoint("input", {                     // issource:true,                         // istarget:false,                     parameters:{                         "p1":34,                         "p2":new date(),                         "p3":function() { console.log("i p3"); }                     }                 });                  var e2 = jsplumb.addendpoint("endpointurl", {                     // istarget:true,                         // issource:false,                     parameters:{                         "p5":343,                         "p3":function() { console.log("foo foo foo"); }                     }                 });                  var conn = jsplumb.connect({source:e1, target:e2});                   e1 = jsplumb.addendpoint("testtemplate", {                     // issource:true,                         // istarget:false,                     parameters:{                         "p1":34,                         "p2":new date(),                         "p3":function() { console.log("i p3"); }                     }                 });                  e2 = jsplumb.addendpoint("ikwtr", {                     // istarget:true,                         // issource:false,                     parameters:{                         "p5":343,                         "p3":function() { console.log("foo foo foo"); }                     }                 });                  var conn = jsplumb.connect({source:e1, target:e2}); 

has faced issue before ?

note: using angular-ui-tree displaying ui elements