angular, nested repeat breaking directive (packery + dragabilly)

Question

I am having a slight issue with using dragabilly in angular, the problem is odd because it was working until I made some changes to how the content using packery is loaded in, specifically adding a level of nested repeats. When I do this, packery still runs correctly, however it seems dragabilly only runs on the first object.

The html looks like -

 <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 just a nested repeat where packery runs off of the outer items, and again, the packery element works fine. It broke when I Added in the nested repeat - these objects have multiple faces which I hide with that side.acive you see there, however the drag handle is inside the nested repeat and I think this may be the problem, or perhaps the nested is taking a bit longer to load in and it doesn't recognize the handle in time? I'm not too sure and that's where I could use some direction.

Here is the directive - http://jsfiddle.net/yq4zwLzs/ . The only thing I added to it was that mobile UA check to try and turn off dragabilly on mobile devices because it's unnecessary at that point. I Tried taking that off it doesn't seem to effect anything.

Here is a plunker of it in action -

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

Forgive the ugliness - but if you look, you can move around the top item, but not the bottom item. That is where I am stuck and I cannot seem to figure out how or why this is happening. You can drag the items by the .handle (title element). I would appreciate any help as I seem to be stuck here.

Thanks for reading!

Update

It seems even if I put the .handle outside of the inner repeat, it still has the same problem. Perhaps it has to do with the order the inner repeat and the angulary packery run?

Update 2

It appears the drag handle logic is not working at all, you can drag by anything, not just .handle

Update 3

I am almost certain this has to do with the nested ng-repeat (perhaps it interacting in conjunction with how the directive runs on the object), because no matter what I try, as long as I have the nested repeat, I have the same issue. If I pull it off it goes back to working as normal, however It will be hard to achieve my desired goal without it :(.

Also - if i turn

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

into

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

It works fine. I need a drag handle though, as there will be content inside these divs the user will interact with, and I don't want the div moving around when they are clicking around inside it. Maybe if there is a way to initiate dragabilly a little bit later?

Answer 1

Looks like it might be a digest issue, as if you stick the Draggabilly creation in a $timeout it works as 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 i noticed whilst fiddling around with it, is if you use a different option than handle, for example { axis: 'x'} then it works without the need for the $timeout.