AngularJS 1.6 crash IE 11 with ng-i18next Directive

Question

I'm having problem when running AngularJs (1.6) Application on IE 11, it crashes and closes the browser when user input some text and emoji icon. 2 out of 10-20 times, I encounter that problem. I was suspected about Memory Leak, but at the same time, If Application doesn't require user input, it has no crash. I wonder if anyone can help me about this.

Libraries:

<script src="js/lib/jquery.js"></script>
<script src="js/lib/lodash.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/emoji-picker.min.js"></script>
<script src="js/lib/rzslider.min.js"></script>
<script src="js/lib/angular-rating-icons.js"></script>
<script src="js/lib/ui-bootstrap-tpls.min.js"></script>

User Input part:

<div ng-if="showInput" class="slide-top" id="inputBox">
  <div class="inputMessageHeader" ng-i18next="chatbot.userinput.title" ng-attr-style="background-color: {{primaryColor}}" style="background-color: {{primaryColor}}"></div>
  <form class="full-height">
    <div layout="row">
      <div flex id="inputUser">
        <textarea maxlength="2000"
                  ng-model="components[currentQaIndex].usrMessage"
                  ng-i18next="[placeholder]chatbot.userinput.placeholder"
                  rows="5" ng-keyup="countCharacters()" 
                  ng-change="hideEmojiPicker()">
        </textarea>
        <div class="counter"><span ng-class="{error: components[currentQaIndex].usrMessage.length > 2000}"> {{components[currentQaIndex].usrMessage.length || 0}} </span> / 2000</div>
      </div>
      <div id="gifArea" ng-if="messageGifUrl" flex="45">
        <img ng-src="{{messageGifUrl}}" />

        <md-button id="gifEdit" ng-click="toggleGifPopup()" aria-label="edit" class="md-icon-button launch fa fa-pencil-square-o"></md-button>
        <md-button id="gifDelete" ng-click="deleteGif()" aria-label="delete" class="md-icon-button launch fa fa-trash-o"></md-button>
      </div>
    </div>
    <div id="separatorLine"></div>
    <div class="form-action">
      <div class="gif-btns">
        <div emoji-picker="components[currentQaIndex].usrMessage" title="Emoji" placement="top" output-format="unicode" class="emoji" ng-click="toggleEmojiPicker()" ng-class="{active: emojiVisible}" on-change-func="hideEmojiPicker">
        </div>
        <span class="gif" ng-click="toggleGifPopup()" ng-class="{active: gifPopupVisible}"></span>
        <span class="gallery"></span>
        <span class="camera"></span>
      </div>
      <div class="btns" >
        <span ng-i18next="chatbot.calltoactions.cancel" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onCancelQuestion()" ng-if="isOther" ></span>
        <span ng-i18next="chatbot.calltoactions.ok" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSaveUserMessage($event)" ng-if="isOther"></span>

        <span ng-i18next="chatbot.calltoactions.validate" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSubmitAnswer($event)" ng-if="!isOther"></span>
        <span ng-i18next="chatbot.calltoactions.skip" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSkipQuestion($event)" ng-if="components[currentQaIndex].options.is_skippable && !isOther" ></span>
      </div>
    </div>
  </form>
</div>

Answer 1

You have some bad code on user input, thats the only conclusion I can make from what you're saying. Post some code or check your user input, you're probably doing some looping or recursion or too many digest cycles. Btw can you repeat and replicate on other browsers? Watch the memory and CPU usage on IE when you're entering input. Something is up on your end, unless angular is broken; however, I wouldn't jump to that conclusion.

Update

<textarea maxlength="2000" ng-model="components[currentQaIndex].usrMessage"
          ng-i18next="[placeholder]chatbot.userinput.placeholder" rows="5"
          ng-keyup="countCharacters()" ng-change="hideEmojiPicker()"> 
</textarea>

use some kind of ng-model-option with debounce here. what is countCharacters? you can just do .length on the model or use $viewValue.length I dont see anything majorly wrong, some optimization that can be done but nothing should completely die here. Test this in chrome and other browsers, and use break points and logging to see why its crashing.