Why does ng-repeat does not accept data from an eventListner inside a link function of a custom directive?

Question

I am working on a formbuilder and my app needs drag and drop funtionality. I am using a custom directive for the droppable area, and two way data binding for the eventlistner. But the problem is I cannot render data from an array inside the eventlistener using ng-repeat. I checked by inputting a sample array outside the eventlistner and it works well. Can anyone help me please?

app.directive("droppable", function () {
return {
restrict: "EA",
scope: {
  contents: "=ngModel",
},
template: ` <div class="element-divs" ng-repeat="element in elements track by $index">
{{element}}</div>`,

link: function (scope, element) {
  var el = element[0];
  if(!Array.isArray(scope.elements) )scope.elements= [];
  
  el.addEventListener("dragover", function (e) {
    if (e.preventDefault) e.preventDefault();
  });

  el.addEventListener("drop", function (e) {
    var item = document
      .getElementById(e.dataTransfer.getData("Text"))
      .cloneNode(true);
    if (item.id == "email-box") {
      var email = document.createElement("input");
      email.type = "email";
      email.className = "emailer";
      scope.elements.push(email);
    }
    else if (item.id == "text-box") {
      var text = document.createElement("input");
      text.type = "text";
      text.className = "texter";
      scope.elements.push(text);
    }
    console.log(scope.elements);// this logs an array in which everytime drop happens an element is added.
  });
},
};
});