Nested ngRepeat

You can move whole rows by grabing row title, all items it selves. Try it out!

Old IE doesnt support Flexible Box Layout so it can look weird. But in modern browsers it is awsome! Dragular will be working well also in old IE but you have to use different css for layout.

Row {{$index}}

        
  // HTML

  <div ng-controller="Example15">
    <div ng-repeat="item in items" class='exampleRow'>
      <div class="row-handle">Row {{$index}}</div>
      <div ng-repeat="item in item.items" class="exampleCell">{{item.content}}</div>
    </div>
  </div>

        
  // CSS

  .exampleRow {
    display: flex;
    flex-direction: row;
  }

  .exampleCell {
    flex-grow: 1;
  }

  .exampleRow,
  .exampleCell {
    margin: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  }

        
  // JS

  .controller('NestedNgRepeat', ['$timeout', '$scope', '$element', 'dragularService', function NestedNgRepeatCtrl($timeout, $scope, $element, dragularService) {
    $timeout(function() { // timeount due to ngRepeat to be ready
      dragularService($element, {
        nameSpace: 'rows',
        moves: function rowOnly (el, container, handle) {
          return handle.classList.contains('row-handle');
        }
      });
      dragularService($element.children(), {
        nameSpace: 'cells',
        moves: function excludeHandle (el, container, handle) {
          return !handle.classList.contains('row-handle');
        }
      });
    }, 0);
    $scope.items = [{
      items: [{
        content: 'Item a1'
      }, {
        content: 'Item a2'
      }, {
        content: 'Item a3'
      }, {
        content: 'Item a4'
      }]
    }, {
      items: [{
        content: 'Item b1'
      }, {
        content: 'Item b2'
      }, {
        content: 'Item b3'
      }, {
        content: 'Item b4'
      }]
    }, {
      items: [{
        content: 'Item c1'
      }, {
        content: 'Item c2'
      }, {
        content: 'Item c3'
      }, {
        content: 'Item c4'
      }]
    }];
  }])