javascript - angular, nested repeat breaking directive (packery + dragabilly) -

i having slight issue using dragabilly in angular, problem odd because working until made changes how content using packery loaded in, adding level of nested repeats. when this, packery still runs correctly, seems dragabilly runs on first object.

the html looks -

 <div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contenthere" packery-angular >     <!-- nested repeat -->     <div ng-repeat="side in widget.sides" ng-show="side.active"> 

so it's nested repeat packery runs off of outer items, , again, packery element works fine. broke when added in nested repeat - these objects have multiple faces hide side.acive see there, drag handle inside nested repeat , think may problem, or perhaps nested taking bit longer load in , doesn't recognize handle in time? i'm not sure , that's use direction.

here directive - http://jsfiddle.net/yq4zwlzs/ . thing added mobile ua check try , turn off dragabilly on mobile devices because it's unnecessary @ point. tried taking off doesn't seem effect anything.

here plunker of in action -

http://plnkr.co/edit/hsvzth3vlf5vi1lf1tfr?p=preview

forgive ugliness - if look, can move around top item, not bottom item. stuck , cannot seem figure out how or why happening. can drag items .handle (title element). appreciate seem stuck here.

thanks reading!

update

it seems if put .handle outside of inner repeat, still has same problem. perhaps has order inner repeat , angulary packery run?

update 2

it appears drag handle logic not working @ all, can drag anything, not .handle

update 3

i has nested ng-repeat (perhaps interacting in conjunction how directive runs on object), because no matter try, long have nested repeat, have same issue. if pull off goes working normal, hard achieve desired goal without :(.

also - if turn

var draggable2 = new draggabilly(element[0], {handle: '.handle'} ); 

into

var draggable2 = new draggabilly(element[0] ); 

it works fine. need drag handle though, there content inside these divs user interact with, , don't want div moving around when clicking around inside it. maybe if there way initiate dragabilly little bit later?

looks might digest issue, if stick draggabilly creation in $timeout works expected

if(!ismobile()){     $timeout(function(){         var draggable2 = new draggabilly(element[0], {handle: '.handle'} );         $rootscope.packery.binddraggabillyevents(draggable2);     }) } 

http://plnkr.co/edit/qxv1vwphzekx3pvhgbi2?p=preview

one thing of note noticed whilst fiddling around it, if use different option handle, example { axis: 'x'} works without need $timeout.