title: Placeholder in Angular on IE issue
body: <p>I have a custom input directive which adds each new element as a tag to a list of previously entered items. And my code works fine in all browsers (Chrome, Safari, Firefox, Edge), my issue is with IE11 and lower. I can't seem to clear off placeholder text, once the input fields are selected.</p>
  
  <p>I'm not quite sure what to do..or how to modify so it behaves nicely in IE also.</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;tagged disabled="{{ canNotEdit }" property="newProfile.educationSubjects" placeholder="{{ 'newVacancy.educationFieldsPlaceholder' | translate }}"&gt;
  &lt;/tagged&gt;
  </code></pre>
  
  <p>tagged.html</p>
  
  <pre><code>&lt;div ng-class="{'element-disabled': disabled }" class="position-relative"&gt;
      &lt;div class="position-relative"&gt;
          &lt;input type="text"
                 ng-disabled="{{ disabled }}"
                 class="inpt"
                 placeholder="{{ placeholder }}"&gt;
          &lt;span class="caret"&gt;
              &lt;svg class="caret-icon"&gt;
                  &lt;use xlink:href="images/svg-generated/svg/symbols.svg#add-s"&gt;
                  &lt;/use&gt;
              &lt;/svg&gt;
          &lt;/span&gt;
  
          &lt;div&gt;
              &lt;div class="taglist list-inline"&gt;
                  &lt;ul&gt;
                      &lt;li class="tag"
                          ng-click="removeItem($index)"
                          ng-repeat="item in dataArray track by $index"&gt;
                          {{ item }}
                          &lt;svg class="tag-close"&gt;
                              &lt;use xlink:href="images/svg-generated/svg/symbols.svg#remove"&gt;&lt;/use&gt;
                          &lt;/svg&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my directive controller:</p>
  
  <p>tagged-dir.js</p>
  
  <pre><code>'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 &amp;&amp; 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();
        });
  
      }
    };
  };
  </code></pre>