How to stop text cursor from going at the end using $Scope. $watch? Angularjs

Question

How do I stop the text cursor from jumping on the last line of a textarea?

//textarea $watch
$scope.$watch('string', function(s){
    var string = s.split('\n');
    if(string.length > 0) {
        var newElements = [];
        for (var i = 0; i < string.length; i++) {
            var str = string[i];
            var obj = {};
            var firstMatch = str.split('|')[0];
            var secondMatch = str.substring(firstMatch.length + 1); //return '' if '|' was not found

            obj.text = firstMatch;
            obj.value = secondMatch;

            newElements.push(obj);
        }
        $scope.elements = newElements;
    }
});

//array of objects $watch
$scope.$watch('elements', function(e){
    var string = '';
    for(var i = 0; i < e.length; i++){
        var str = e[i];
        var value = str.value;
        var pipe = '|';
        var text = str.text;
        if( value == ''){
            pipe = '';
        }
        string += (text + pipe + value) + (i == e.length - 1 ? '' : "\n");
    }
    $scope.string = string;
}, true);

The text cursor (inside the textarea) is always skipping to the end after the value is being deleted. For example: try deleting the first value (value1) in textarea up to the pipe (|), the text cursor goes at the end of the line. I want the cursor to be in the position where the value1 is.

text1|value1 <-- depois que o value1 é apagado,  o cursor de texto vai automaticamente no final da linha, mas eu quero que o cursor fique aqui depois que o ``value1`` é apagado
text2|value2
text3|value3
text4|value4 <-- cursor de texto vem parar aqui

Jsfiddle with the example:

angular
  .module('App', [])
  .controller('Ctrl', function($scope) {
  $scope.elements = [{
  text: 'text1',
  value: 'value1'
  },
  {
  text: 'text2',
  value: 'value2'
  },
  {
  text: 'text3',
  value: 'value3'
  },
  {
  text: 'text4',
  value: 'value4'
  }
  ];
 $scope.$watch('string', function(s){
        var string = s.split('\n');
        if(string.length > 0) {
            var newElements = [];
            for (var i = 0; i < string.length; i++) {
                var str = string[i];
                var obj = {};
                var firstMatch = str.split('|')[0];
                var secondMatch = str.substring(firstMatch.length + 1); //return '' if '|' was not found

                obj.text = firstMatch;
                obj.value = secondMatch;

                newElements.push(obj);
            }
            $scope.elements = newElements;
        }
    });
    $scope.$watch('elements', function(e){
        var string = '';
        for(var i = 0; i < e.length; i++){
            var str = e[i];
            var value = str.value;
            var pipe = '|';
            var text = str.text;
            if( value == ''){
                pipe = '';
            }
            string += (text + pipe + value) + (i == e.length - 1 ? '' : "\n");
        }
        $scope.string = string;
    }, true);
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">

   <div class="sortable-item-contents"  ng-repeat="(id, content) in elements track by $index">
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <input type="text" ng-model="content.text" class="form-control" />
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <input type="text" ng-model="content.value" class="form-control"    />
                    </div>
                </div>               
            </div>
        </div>

        <textarea  ng-model="string" class="form-control" style="resize: none; height: 210px;"></textarea>

</div>