Заполнитель в Angular по проблеме IE

У меня есть пользовательская директива ввода, которая добавляет каждый новый элемент в качестве тега в список ранее введенных элементов. И мой код отлично работает во всех браузерах (Chrome, Safari, Firefox, Edge), моя проблема связана с IE11 и ниже. Кажется, я не могу очистить текст заполнителя после выбора полей ввода.

Я не совсем уверен, что делать ... или как изменить, чтобы он хорошо работал и в IE.

main.html

<tagged disabled="{{ canNotEdit }" property="newProfile.educationSubjects" placeholder="{{ 'newVacancy.educationFieldsPlaceholder' | translate }}">
</tagged>

помеченный.html

<div ng-class="{'element-disabled': disabled }" class="position-relative">
    <div class="position-relative">
        <input type="text"
               ng-disabled="{{ disabled }}"
               class="inpt"
               placeholder="{{ placeholder }}">
        <span class="caret">
            <svg class="caret-icon">
                <use xlink:href="images/svg-generated/svg/symbols.svg#add-s">
                </use>
            </svg>
        </span>

        <div>
            <div class="taglist list-inline">
                <ul>
                    <li class="tag"
                        ng-click="removeItem($index)"
                        ng-repeat="item in dataArray track by $index">
                        {{ item }}
                        <svg class="tag-close">
                            <use xlink:href="images/svg-generated/svg/symbols.svg#remove"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

и мой директивный контроллер:

помеченный-dir.js

'use strict';

export default function() {
  return {

    restrict: 'E',

    scope: {
      dataArray: '=property',
      disabled: '@',
      placeholder: '@'
    },

    templateUrl: '..path-to/tagged.html',

    link: function(scope, element) {

      var input = angular.element(element.find('input')[0]);
      var button = angular.element(element.find('span')[0]);

      scope.removeItem = function(index) {
        if(scope.disabled === 'true') {
          return false;
        }
        scope.dataArray.splice(index, 1);
      };

      function addTag() {

        let val = input.val().replace(/\/|\\/g, '');

        if(!val) {
          return;
        }

        scope.dataArray.push(val);
        scope.$digest();

        input.val('');
      }

      input.bind('keydown keypress', function(event) {
        if(event.which === 13 && scope.disabled !== 'true') {
          event.preventDefault();
          addTag();
        }
      });

      input.bind('mouseenter', function() {
        if(scope.disabled === 'true') {
          return false;
        }
        element.addClass('taglist-hovered');
      });

      input.bind('mouseleave', function() {
        if(scope.disabled === 'true') {
          return false;
        }
        element.removeClass('taglist-hovered');
      });

      input.bind('focus', function() {
        if(scope.disabled === 'true') {
          return false;
        }
        element.addClass('taglist-focused');
      });

      input.bind('blur', function() {
        if(scope.disabled === 'true') {
          return false;
        }
        element.removeClass('taglist-focused');
      });

      button.on('click', function(event) {
        if(scope.disabled === 'true') {
          return false;
        }
        addTag();
      });

    }
  };
};