The directive does not work after changing the textarea model

Question

I have line-delimited text and urls:

first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com.

I want to update the values ng-repeatafter clicking the button copy.

I have this HTML:

<div ng-controller="myCntrl">
    <textarea ng-model="copy_note_value"></textarea>

    <button data-ng-click="copy()">copy</button>

    <div>
        <p ng-repeat="row in note_value.split('\n') track by $index"
           wm-urlify="row"
           style="display: inline-block;"
            >
        </p>
    </div>
</div>

Controller:

app.controller('myCntrl', function ($scope) {

     $scope.note_value = "first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com";

     $scope.copy_note_value = angular.copy($scope.note_value);

    $scope.copy = function(){
      $scope.note_value = angular.copy($scope.copy_note_value);   
    }

});

I have a directive that should take the text and return the urlfied text:

app.directive('wmUrlify', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {

            function urlify(text) {
                var urlRegex = /(https?:\/\/[^\s]+)/g;
                return text.replace(urlRegex, function (url) {
                    return '<a href="' + url + '" target="_blank">' + url + '</a>';
                })
            }

            var text = $parse(attrs.wmUrlify)(scope);
            var html = urlify(text);
            element[0].inneHtml(html)

        }
    };
}]);

Here is the stream: The user changes the text in textareaand presses the button copy. I expect to show a change in ng-repeat.

It only works if I add a new line, not a line.

What is wrong here? This is my fiddle

Answer 1

track by $index ng-repeat. , Angular, note_value.split('\n') $index i.e .

track by - . , , $index, , , Angular , .

track by $index , . , , : ( )

$scope.indexFunction = function($index, val) {
    // Creating an unique identity based on the index and the value
    return $index + val;
};

ng-repeat :

<p ng-repeat="row in note_value.split('\n') track by indexFunction($index, row)"></p>

https://docs.angularjs.org/api/ng/directive/ngRepeat