Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node' issue while using @mentio more than one in a page?

Question

I'm using textAngular Wysiwyg/Text-Editor with @mentio library, when i used directive more than one in one html page its causing issue. I tried to use context-editor for mention id still could not resolve the problem

<mentio-menu mentio-for="'content-editor-{{$id}}'"
         mentio-trigger-char="'@'"
         mentio-items="people"
         mentio-template-url="/iterator.tpl"
         mentio-search="searchPeople(term)"
         mentio-select="getPeopleText(item)">

var directiveDefinitionObject = {
        restrict: 'E',
        templateUrl: "app/partials/textAngular-mention-template/replyTextAngularWithMentio.html",
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        controller: ['$scope', function ($scope) {
                $scope.setup = function (element) {
                    element.attr('mentio', 'mentio');
                    element.attr('mentio-typed-term', 'typedTerm');
                    element.attr('mentio-require-leading-space', 'true');
                    element.attr('mentio-id', "'content-editor-{{$id}}'");
                };

Answer 1

The way I solved this issue was by writing a function to return the mentio-for value.

<mentio-menu mentio-for="getContentId()"
     mentio-trigger-char="'@'"
     mentio-items="people"
     mentio-template-url="/iterator.tpl"
     mentio-search="searchPeople(term)"
     mentio-select="getPeopleText(item)">

Then, on your directive, create a function like this:

$scope.getContentId = function() {
                return 'content-editor-' + $scope.id;
            };