Drag and drop across multiple containers is not working with ng-if

[jithureddy]

I have repeated containers with below template as below,
<div flex layout="column" class="backlog-item-card-content" ng-if="!vm1.isFolderExpired"> <div layout="column" flex id={{child._id}}expandFocusBox class="focusBox" update-work-item iteration="child"> <div layout="column" flex layout-align="start center" style="min-height: 15px;"> <div id="{{child._id}}containerFolder" data-container-id="{{child._id}}" dragula='"first-bag"' class="containerBox"> <div class="dragged-work-item-element work-item-space-top" layout="column" ng-repeat="item in child.work_items | limitTo : vm1.maxLimitOfItems" ng-repeat-end-custom="vm1.loadRemainingItems()" id={{item._id}}child data-item-type="parent" ng-show="item.isFilter" work-item-filter item="item"> <div drop-files item="item" layout="column" ng-include="'app/components/work/iteration-work-area/item-config/item-create.tmpl.html'"></div> </div> </div> </div> </div> </div>

If I remove ng-if condition in the first line the drag and drop across different containers is working. I want to have that ng-if for one functionality, but drag and drop is only working for that container not across containers.
Please help me here...
I found a reference here http://jsfiddle.net/gn3sff8v/9/ to add bags dynamically as and when ng-if is true.. but how to do that in angular version