Angular5.x with JqueryUI Draggable - The UI doesn't update when the stop event is triggered

Question

I have an issue when using Angular5/6 with Jquery UI draggable.

I have a model (an array) and a draggable item using JQueryUI draggable, whenever I stop dragging the item, a new element will be pushed to the model. However, after I drag the item to somewhere else, although a new element has already added to the model, the view is still not updated, I have to click on the draggable item again to trigger the view to update.

Do you have any suggestions for this issue?

Here is my code:

export class App {
  model: any;

  constructor() {
    this.model = [{name: "Item 1"}, {name: "Item 2"}];
  }

  ngAfterViewInit() {
      this.initDraggable();
  }   

  initDraggable($content) : void {
    var me = this;
    var options = {
          helper: "clone",
          start: function () {
              console.log("start dragging");
          },
          stop: function () {
            console.log("stop dragging - add new element to the model");
            me.model.push({
                name: "New Item"
            });
          }
      };

     $(".draggable-item").draggable(options);
  }
}

Here is my plunker: https://plnkr.co/edit/tZbLHy0tYHd81nOupJVU

Thanks!