@name tagging in angular js with at.js

Question

I am trying to create a comment box with user tagging using at.js in angular. But here no response for this code actually

<div ng-reapet ="user_data in data">
  {{data.content}}
  <input type="text" ng-model="user_content"  class="user_content"  id="user_content" >         
</div>

$(function(){
          $.fn.atwho.debug = true;
            var names = ["Jacob","Isabella","Ethan","Emma",,"Emily","Daniel","Madison"];

  var names = $.map(names,function(value,i) {
  return {'id':i,'name':value,'email':value+"@email.com"};
});


var at_config = {
     at: "@",
     data: names,
     headerTpl: '<div class="atwho-header">Member List<small>↑&nbsp;↓&nbsp; 
       </small></div>',
     insertTpl: '${name}',
     displayTpl: "<li>${name} <small>${email}</small></li>",
     limit: 200
};

$inputor = $(".user_content").atwho(at_config);
$inputor.caret('pos', 47);
$inputor.focus().atwho('run');  

Answer 1

You need to make sure that you run the atwho code after AngularJS finish its render cycle.

for me, I am using an AngularJS component with $timeout to make sure the render cycle is finished, or you can use $postLink.

$timeout(function () {
      atWhoWrapper.draw(element, atWhoOptions, otherCopyOptions);
}, 100);

Check my component for wrapping at-who line 345.