Как программно сфокусироваться на следующем элементе ввода после ввода одного символа в ios mobile с помощью angular 1?

Question

У меня есть несколько полей ввода, как показано ниже.

<input type='text' autocapitalize='off' ng-keypress='validateAnswer($event)' id='single_char_box_1'  class='form-control' ng-model='charValues[0]' size='1' maxlength='1'  />
<input type='text' autocapitalize='off' ng-keypress='validateAnswer($event)' id='single_char_box_2'  class='form-control' ng-model='charValues[1]' size='1' maxlength='1'  />
<input type='text' autocapitalize='off' ng-keypress='validateAnswer($event)' id='single_char_box_3'  class='form-control' ng-model='charValues[2]' size='1' maxlength='1'  />

В моем контроллере у меня есть следующий код:

$scope.validateAnswer = function($event){
            var regex = new RegExp("[a-z]|[A-Z]|[0-9]");

            var key = String.fromCharCode(!$event.charCode ? $event.which : $event.charCode);

            if (!regex.test(key)) {
               $event.preventDefault();
               return false;
            }else{

                var next_element = document.getElementById($event.target.attributes.autoTabTo.nodeValue);

                if (next_element) {

                    next_element.focus();

                }


            }
        };

Вышеупомянутый код прекрасно работает в веб-браузере, но в Ipad (браузер Chrome) он ведет себя по-другому. Он переходит на второй вход, когда вы вводите символ в первый вход . Он не отображает никаких символов при первом вводе .