Angular 2, ng2-dragula, and dragulaModel

Question

I'm trying to use ng2-dragula in my app to add the option to reorder a list of instructions that were added to a list. For example, think of it as if you were making a recipe and you put in an instruction but then wanted to move it somewhere else in the list without deleting other ones, etc. I'm going for something similar.

Here's the HTML:

<div [dragula]="'recipeInstructionBag'" [dragulaModel]="recipe.instructions">
    <div class="input-group" *ngFor="let instruction of recipe?.instructions; let i = index; trackBy:trackInstructions">
        <span class="input-group-addon reorder-trigger"><i class="fa fa-reorder"></i></span>
        <input class="form-control" type="text" [ngModel]="instruction" (ngModelChange)="recipe.instructions[i] = $event" [name]="'recipeInstruction' + i">
    </div>
</div>

So I've got the directives in the right spot, I've got the *ngFor working and able to edit instructions in place, etc. Everything that I want to happen is working, except when dragging to reorder these items. I've looked at the docs, specifically the Angular specific examples at the bottom of the page, and that's where I got the info for the [dragulaModel] directive. The problem is when I try and drag and drop elements, they don't reorder properly. I'll try and explain:

With two items in the list, dragging to reorder doesn't reorder them. I drop the second item so that it should be the first, and it gets placed back in its original spot.

Now watch this GIF with 3 items:

As you can see I try and move item 3 into the second spot. It keeps getting dropped to the bottom of the list. Then I take it to the top spot, and it reorders the list to be 2, 3, 1. Similar things happen when there are 4 or more items in the list.

Also, when adding a new item after trying to reorder, it gets placed in the array in unexpected places:

I'm not sure what the deal is or how to fix it. If anyone has experience with this and can help, I'd greatly appreciate it!