AngularJS, why are all characters drawn instead of just one?

Question

JavaScript

Site: hanni2.zaoios.ru
When you enter the recipe, all characters start to be drawn instead of one

/*
    Контроллер ввода прописей
 */

angular.module('siteApp')

    .controller('workSpaceCtrl', function($scope, $sce, $location, $anchorScroll, $timeout, workFactory) {
        $scope.list_name = '';
        $scope.emails = '';

        $scope.symbols = [];
        $scope.symbolsInput = '';
        $scope.symbolsFilter = '';
        $scope.wrap = [];
        $scope.lists_amount = 1;
        $scope.success_sent = false;

        var symbol_added = false;
        var old_wrap = [];

        $scope.init = function() {
            workFactory.getSymbols().then(function(data) {
                $scope.symbols = data;
                for(var i = 0; i < $scope.symbols.length; i++)
                    $scope.symbols[i].webm_html = $sce.trustAsHtml(getVideoHtml($scope.symbols[i].webm));

                redrawWrap();
            });
        };
        $scope.initWithInput = function(symbols, name) {
            $scope.symbolsInput = symbols;
            $scope.list_name = name;

            $scope.init();
        };
        $scope.sendWorksheet = function() {
            var input = {
                name    : $scope.list_name,
                emails  : $scope.emails,
                symbols : $scope.symbolsInput
            };

            workFactory.sendSheet(input).then(function() {
                $scope.success_sent = true;
            });
        };
        $scope.removeChinese = function(value) {
            var result = '';
            var length = value.length;

            for(var i = 0; i < length; i++)
                if(!isChinese(value[i]))
                    result += value[i];

            if(result == '')
                return null;

            return result;
        };
        $scope.repeatVideo = function(item, n_list, index) {
            //item.gif_path = item.gif + "?list=" + n_list + "&row=" + index + "&time=" + new Date();
            var src_str = item.gif + "?list=" + n_list + "&row=" + index;
            if(isIE())
                src_str += "&time=" + Date.now();
            $('#page-' + n_list + '-row-' + index + '-gif').attr('src', src_str);
        };
        $scope.startsWith = function(state, viewValue) {
            if(!viewValue)
                return false;
            return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
        };

        $scope.$watch('symbolsInput', function(newValue, oldValue) {
            symbol_added = false;

            if(typeof newValue != "string") {
                var item = $scope.symbolsInput;
                $scope.symbolsInput = oldValue;

                onSelectSymbol(item);
                symbol_added = true;
            }
            else {
                if(!hasLatin(newValue))
                    symbol_added = true;

                onUpdateSymbolsInput();
            }

            redrawWrap();
        });

        function scrollToPure(element, to, duration) {
            if (duration <= 0) return;
            var difference = to - element.scrollTop;
            var perTick = difference / duration * 10;

            setTimeout(function() {
                element.scrollTop = element.scrollTop + perTick;
                if (element.scrollTop === to) return;
                scrollToPure(element, to, duration - 10);
            }, 10);
        }
        function scrollToLast() {
            var p_num = 1;
            var length = removeLatins($scope.symbolsInput).length;

            if(length > 20 && length <= 40)
                p_num = 2;
            else if(length > 40)
                p_num = 3;

            while(length > 20)
                length -= 20;

            if(!navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/) && !iOS()) {
                setTimeout(function() {
                    $('html,body').animate({
                            scrollTop: $("#page-" + p_num + "-row-" + length).offset().top - 120},
                        'slow'
                    );
                }, 500);
            }
        }
        function iOS() {

            var iDevices = [
                'iPad Simulator',
                'iPhone Simulator',
                'iPod Simulator',
                'iPad',
                'iPhone',
                'iPod'
            ];

            if (!!navigator.platform) {
                while (iDevices.length) {
                    if (navigator.platform === iDevices.pop()){ return true; }
                }
            }

            return false;
        }
        function updateWrapView() {
            var symbols = removeLatins($scope.symbolsInput);
            var length = symbols.length;
            var index = 0;
            var n_list = 0;

            for(a = 0; a < length; a++) {
                if(a == 20 || a == 40) {
                    index = 0;
                    n_list++;
                }

                $scope.wrap[n_list][index][0] = angular.copy(findSymbol(symbols[a]));
                $scope.wrap[n_list][index][1] = angular.copy(findSymbol(symbols[a]));
                $scope.wrap[n_list][index][2] = angular.copy(findSymbol(symbols[a]));

                var src_str = $scope.wrap[n_list][index][0].gif + "?list=" + n_list + "&row=" + index;
                if(isIE())
                    src_str += "&time=" + Date.now();

                if(old_wrap[n_list] == null)
                    $('#page-' + n_list + '-row-' + index + '-gif').attr('src', src_str);
            
                else if(old_wrap[n_list][index][0] == null)
                    $('#page-' + n_list + '-row-' + index + '-gif').attr('src', src_str);
        
                else if(old_wrap[n_list][index][0].gif != $scope.wrap[n_list][index][0].gif)
                    $('#page-' + n_list + '-row-' + index + '-gif').attr('src', src_str);

                index++;
            }

            if(symbol_added)
                scrollToLast();
        }
        function redrawWrap() {
            updateListsAmount();
            old_wrap = angular.copy($scope.wrap);
            $scope.wrap = [];

            for(var a = 0; a < $scope.lists_amount; a++) {
                $scope.wrap[a] = [];

                for(var i = 0; i < 20; i++) {
                    $scope.wrap[a][i] = [];

                    for(var g = 0; g < 15; g++)
                        $scope.wrap[a][i][g] = null;
                }
            }

            $timeout(updateWrapView, 10);
        }
        function getVideoHtml(path) {
            return '<video width="60" height="60" autoplay>' +
                      '<source src="' + path + '" type="video/webm;" />' +
                   '</video>';
        }
        function updateListsAmount() {
            var length = removeLatins($scope.symbolsInput).length;

            if(length <= 20)
                $scope.lists_amount = 1;
            else if(length <= 40)
                $scope.lists_amount = 2;
            else $scope.lists_amount = 3;
        }
        function onSelectSymbol(item) {
            var carret_pos = $('#inputSymbols').caret();
            var result = insertChar($scope.symbolsInput, carret_pos, item.symbol);
            result = removeLatins(result);

            $scope.symbolsInput = result;
        }
        function onUpdateSymbolsInput() {
            $scope.symbolsFilter = '';

            var length = $scope.symbolsInput.length;
            for(var i = 0; i < length; i++)
                if(isLatin($scope.symbolsInput[i]))
                    $scope.symbolsFilter += $scope.symbolsInput[i];

            if($scope.symbolsFilter == '')
                $scope.symbolsFilter = null;
        }

        function hasLatin(st) {
            var length = st.length;

            for(var i = 0; i < length; i++)
                if(!isLatin(st[i]))
                    return false;

            return true;
        }
        function isLatin(ch) {
            var rforeign = /[^\u0000-\u007f]/;
            return !rforeign.test(ch);
        }
        function isChinese(ch) {
            var rforeign = /[^\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\u2605-\u2606\u2190-\u2195\u2000-\u3000]/;
            return !rforeign.test(ch);
        }
        function insertChar(str, pos, ch) {
            return str.substr(0, pos) + ch + str.substr(pos);
        }
        function removeLatins(str) {
            var result = '';
            var length = str.length;

            for(var i = 0; i < length; i++)
                if(isChinese(str[i]))
                    result += str[i];

            return result;
        }
        function findSymbol(ch) {
            var length = $scope.symbols.length;

            for(var i = 0; i < length; i++)
                if($scope.symbols[i].symbol == ch)
                    return $scope.symbols[i];

            return null;
        }
        function isIE() {
            return navigator.appName == 'Microsoft Internet Explorer' ||
                (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1) ||
                (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Trident') > -1);
        }

        $(window).resize(function() {
            $scope.$apply(function() {
                redrawWrap();
            });
        });
    });