Filtered ngRepeat - with model

{{item.content}}
{{item.content}}
Items1:
          
{{items1 | json}}
Items2:
          
{{items2 | json}}
        
// JS
  .controller('NgRepeatFilteredWithModel', ['$scope', '$element', 'dragularService', '$filter', function TodoCtrl($scope, $element, dragularService, $filter) {
    $scope.items1 = [{
      content: 'Move me, but you can only drop me in one of these containers.'
    }, {
      content: 'If you try to drop me somewhere other than these containers, I\'ll just come back.'
    }, {
      content: 'Apple 3'
    }, {
      content: 'Orange 4'
    }, {
      content: 'Orange 5'
    }, {
      content: 'Apple 6'
    }, {
      content: 'Apple 7'
    }, {
      content: 'Apple 8'
    }];
    $scope.items2 = [{
      content: 'Apple 9'
    }, {
      content: 'Orange 10'
    }, {
      content: 'Orange 11'
    }, {
      content: 'Apple 12'
    }, {
      content: 'Orange 13'
    }, {
      content: 'Apple 14'
    }];
    $scope.filter1query = 'Orange';
    $scope.filter2query = 'Orange';
    $scope.filteredModel1 = [];
    $scope.filteredModel2 = [];
    $scope.getFilteredModel = function (filteredModel, items, filterQuery) {
      filteredModel.length = 0;
      /*
      * Following one-liner is same like:
      *   var filteredModelTemp = $filter('filter')(items, filterQuery);
      *   angular.forEach(filteredModelTemp, function(item){
      *     filteredModel.push(item);
      *   });
      * Or like:
      *   var filteredModelTemp = $filter('filter')(items, filterQuery);
      *   for(var i; i < filteredModelTemp.length; i++){
      *     filteredModel.push(filteredModelTemp[i]);
      *   }
      *
      * You cannot just assign filtered array to filteredModel like this:
      *   filteredModel = $filter('filter')(items, filterQuery);
      * Because you would replace the array object you provide to dragular with new one.
      * So dragular will continue to use the one it was provided on init.
      * Hopefully I make it clear. :)
       */
      [].push.apply(filteredModel, $filter('filter')(items, filterQuery));
      return filteredModel;
    };
    var containers = $element.children().eq(1).children();
    dragularService.cleanEnviroment();
    dragularService([containers[0],containers[1]],{
      containersModel: [$scope.items1, $scope.items2],
      containersFilteredModel: [$scope.filteredModel1, $scope.filteredModel2]
    });
  }]);

        
        
<!-- HTML -->
  <div class='wrapper' ng-controller="NgRepeatFilteredWithModel">
    <div class="tableRow">
      <div class='containerVertical'>
        <input ng-model="filter1query" style="margin:10px 10px">
      </div>
      <div class='containerVertical'>
        <input ng-model="filter2query" style="margin:10px 10px">
      </div>
    </div>
    <div class='tableRow'>
      <div class='containerVertical'>
        <div ng-repeat="item in getFilteredModel(filteredModel1, items1, filter1query)">{{item.content}}</div>
      </div>
      <div class='containerVertical'>
        <div ng-repeat="item in getFilteredModel(filteredModel2, items2, filter2query)">{{item.content}}</div>
      </div>
    </div>
    <div class="tableRow">
      <div class='containerVertical'>
        <pre>Items1:
          <br/>{{items1 | json}}</pre>
      </div>
      <div class='containerVertical'>
        <pre>Items2:
          <br/>{{items2 | json}}</pre>
      </div>
    </div>
  </div>