Reorder button not working when using in combination with ng-include


#1

I have an <ion-list> with ng-repeat that repeates the <ion-item> tags. The list has a reorder button, and reordering works perfectly.

<ion-list show-reorder="true">
        <ion-item ng-repeat="i in items"> 
           <div>{{i}}</div>      
           <ion-reorder-button class="ion-navicon" on-reorder="onMove(i, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>
</ion-list>

But as soon as I move the <ion-item>'s inner HTML into a separate template and include that with ng-include, the reorder function does not work anymore.

EDIT 15.09.15:
*“Does not work anymore” means that I can drag items to another position, but after dropping it, the function of “on-reorder” will NOT be executed and the item stays on its old position. *

<script type="text/ng-template" id="template.html">
      <div>{{i}}</div>    
      <ion-reorder-button class="ion-navicon" on-reorder="onMove(i, $fromIndex, $toIndex)"></ion-reorder-button>
    </script>

    <ion-list show-reorder="true">
            <ion-item ng-repeat="i in items"> 
              <ng-include src="'template.html'" />
             </ion-item>
    </ion-list>

The controller code:

$scope.items = [];
  $scope.items.push("Cat");
  $scope.items.push("Dog");
  $scope.items.push("Horse");
  
  $scope.onMove = function(item, fromIndex, toIndex) {
   
      $scope.items.splice(fromIndex, 1);
      $scope.items.splice(toIndex, 0, item);
  }

Here’s a codepen to demonstrate this:

Any help appreciated!


#2

Additional Information: The console spits out this error message:

Error: [$compile:ctreq] Controller 'ionItem', required by directive 'ionOptionButton', can't be found!