title: How to make the what happening box like twitter in our site?
body: <p>I am doing this by taking the cursor position from the content-editable box. When a new tag is created the cursor comes before the tag but it should be after the tag. Also i am not able to merge/split the tag.
  Please give some idea how can i do this.</p>
  
  <pre><code>Visit (https://plnkr.co/edit/DSHKEcOnBXi54KyiMpaT?p=preview) !
  </code></pre>
  
  <p>What i want here, after pressing the enter key for new tag the cursor should be at the end of tag while it is not and also the merging/spliting functionality like the twitter what's happening box.</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p>Now this code is working fr me </p>
  
  <pre><code>$scope.myIndexValue = "5";
              $scope.searchTag = function(term) {
                  var tagList = [];
                  angular.forEach($rootScope.tags, function(item) {
                      if (item.name.toUpperCase().indexOf(term.toUpperCase()) &gt;= 0) {
                          tagList.push(item);
                      }
                  });
                  $scope.tag = tagList;
                  return $q.when(tagList);
              };
  
              $scope.getTagText = function(item) {
                  // note item.label is sent when the typedText wasn't found
                  return '&lt;a&gt;#&lt;i&gt;' + (item.name || item.label) + '&lt;/i&gt;&lt;/a&gt; ';
              };
  
              $scope.resetDemo = function() {
                  // finally enter content that will raise a menu after everything is set up
                  $timeout(function() {
                      //var html = "Tell us something about this or add a macro like brb, omw, (smile)";
                      var htmlContent = $element.find('#htmlContent');
                      var html = "";
                      if (htmlContent) {
                          var ngHtmlContent = angular.element(htmlContent);
                          ngHtmlContent.html(html);
                          ngHtmlContent.scope().htmlContent = html;
                          // select right after the #
                          mentioUtil.selectElement(null, htmlContent, [0], 8);
                          ngHtmlContent.scope().$apply();
                      }
                  }, 0);
              };
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class="share_tags fs-12"&gt;
          &lt;div class="row margin_row"&gt;
              &lt;div class="col-md-12 no_padding"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div contenteditable="true" mentio
                           mentio-typed-term="typedTerm"
                           mentio-macros="macros"
                           mentio-require-leading-space="true"
                           mentio-select-not-found="true"
                           class="editor tag" placeholder="Tell Us something about This"
                           mentio-id="'htmlContent'"
                           id="htmlContent"
                           ng-model="htmlContent"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;mentio-menu
                          mentio-for="'htmlContent'"
                          mentio-trigger-char="'#'"
                          mentio-items="tag"
                          mentio-template-url="/people-mentions.tpl"
                          mentio-search="searchTag(term)"
                          mentio-select="getTagText(item)"
                          &gt;&lt;/mentio-menu&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/ng-template" id="/people-mentions.tpl"&gt;
              &lt;ul class="list-group user-search"&gt;
                  &lt;li mentio-menu-item="tag" ng-repeat="tag in items" class="list-group-item"&gt;
                      &lt;span ng-bind-html="tag.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"&gt;&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Reference link</p>
  
  <pre><code>http://jeff-collins.github.io/ment.io/?utm_source=angular-js.in&amp;utm_medium=website&amp;utm_campaign=content-curation#/
  </code></pre>
  
  <p>is working fine for me.</p>
  
  <hr>
  
  <p>This is not working perfectly but for the time being i am using this code.</p>
  
  <p>In app.js </p>
  
  <pre><code>var app = angular.module('plunker', []);
  app.controller('MainCtrl', function ($scope, $filter, $element) {
  var tags;
  $scope.allTags = ['Tag1', 'PrivateTag', 'Xtag', 'PublicTag1',       'newTag', 'socialTag', 'cricketTag'];
  var replacedTag = '';
  var replacedIndex;
  var data;
  $scope.log = function (name) {
      $scope.tags = [];
      $('ul').html(' ');
      console.log("here", $('ul'))
      var data = $('textarea').val();
      replacedIndex = data.indexOf(replacedTag)
      console.log('test', name, replacedTag, replacedIndex, data);
      var replacedData = data.substring(0, replacedIndex - 1) + ' #' + name + data.substr(replacedIndex + replacedTag.length);
      $('textarea').val(replacedData);
      $('textarea').keyup();
  }
  f = $scope.log;
  
  
  
  $('textarea').on('keyup', function (e) {
  
    function getIndexOf(arr, val) {
    var l = arr.length,
      k = 0;
    for (k = 0; k &lt; l; k = k + 1) {
      if (arr[k] === val) {
        return k;
      }
    }
    return false;
  }
      $('ul').html('');
      $scope.tags = [];
      tags = $(this).val().match(/#\S+/g);
      console.log("---tags-", tags)
  
      var a = data = $(this).val();
      if (tags &amp;&amp; tags.length) {
          tags.forEach(function (tag,index) {
            var index1 = getIndexOf(tags, tag);
            console.log("index----",index, index1,tag)
  
  
              replacedTag = tag;
              $scope.tags = tag ? $filter('filter')($scope.allTags, tag.substr(1)) : [];
              if ($scope.tags &amp;&amp; $scope.tags.length &amp;&amp; (e.keyCode &amp;&amp; e.keCode != 32)) {
                $scope.tags.forEach(function (tag1, index) {
                      $('ul').append('&lt;li&gt;' + '&lt;a href="javascript:;" onclick=f("' + tag1 + '");&gt;'
                          + tag1 + '&lt;/a&gt;' + '&lt;/li&gt;')
                  })
              }
              else {
                $('ul').html(' ');
              }
              if(index == index1) {
                  var b = a.substring(0, a.indexOf(tag) - 1) + ' &lt;a&gt;' + tag + '&lt;/a&gt; ' + a.substr(a.indexOf(tag) + tag.length);
  
              }
              else {
  
                  var b = a.substring(0, a.lastIndexOf(tag) - 1) + ' &lt;a&gt;' + tag + '&lt;/a&gt; ' + a.substr(a.lastIndexOf(tag) + tag.length);
  
              }
  
  
              a = b;
              $('p').html(b)
  
          })
      }
  })
  </code></pre>
  
  <p>});</p>
  
  <p>HTML 
      </p>
  
  <pre><code>    &lt;br&gt;
      &lt;br&gt;
      &lt;p&gt;&lt;/p&gt;
  
      &lt;textarea rows="2" cols="80"&gt;&lt;/textarea&gt;
      &lt;div&gt;
        &lt;ul&gt;
  
      &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>For live demo Visit 
      <a href="https://plnkr.co/edit/SD9eouQa5yrViwxQD6yN?p=preview" rel="nofollow">https://plnkr.co/edit/SD9eouQa5yrViwxQD6yN?p=preview</a></p>
  
  <p>i am also looking for the better answer.</p>