title: ment.io - model is not updating on mouse
body: <p>I am using ment.io plugin from <a href="http://jeff-collins.github.io/ment.io/#/examples" rel="nofollow">http://jeff-collins.github.io/ment.io/#/examples</a> with tinyMce for editor support.</p>
  
  <p>All was well until i found that when i select menu item by using mouse, model is not updating automatically, though in editor it is showing selected text properly.</p>
  
  <p>Further while investigation, found that model is updating when we do some key event inside editor after selection with mouse.</p>
  
  <p>While select with arrow key and select using enter or tab, model is updating properly. This might be because, this is the key event which editor seeks in earlier case.</p>
  
  <p>Here is link of fiddle for the scrnario <a href="https://jsfiddle.net/vikasnale/2p6xcssf/5/" rel="nofollow">https://jsfiddle.net/vikasnale/2p6xcssf/5/</a></p>
  
  <pre><code>&lt;div ng-app="App"&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/ng-template" id="/tag-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 class="text-primary" ng-bind-html="Tag.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;textarea mentio-id="'tinyMceTextArea'" ui-tinymce="tinyMceOptions" mentio mentio-typed-text="typedTerm" mentio-require-leading-space="true" ng-model="Content" mentio-iframe-element="iframeElement"&gt;&lt;/textarea&gt;
  
  
  &lt;mentio-menu id="hastmenu" mentio-for="'tinyMceTextArea'" mentio-trigger-char="'#'" mentio-items="tags" mentio-template-url="/tag-mentions.tpl" mentio-search="searchTags(term)" mentio-select="getTagTextRaw(item)"&gt;&lt;/mentio-menu&gt;
  
  &lt;br/&gt;
  &lt;p&gt;Output Model: {{Content}}&lt;/p&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>angular.module('App', ['mentio', 'ui.tinymce'])
  </code></pre>
  
  <p>.controller("Ctrl", ['$scope', 'mentioUtil',
      function($scope, mentioUtil) {</p>
  
  <pre><code>  $scope.getTagTextRaw = function(item) {
      return '&lt;i class="mention-tag-text" style="color:#a52a2a;"&gt;' + item.name + '&lt;/i&gt;';
    };
  
    $scope.searchTags = function(term) {
      var tagsList = [];
      angular.forEach($scope.allTagList, function(item) {
        if (item.id.toUpperCase().indexOf(term.toUpperCase()) &gt;= 0) {
          if (tagsList.length &lt;= 5) {
            tagsList.push(item);
          }
        }
      });
  
      $scope.tags = tagsList;
      return tagsList;
    };
  
    $scope.allTagList = [{
      "id": "ctp",
      "name": "#ctp"
    }, {
      "id": "earningRelease",
      "name": "#earningRelease"
    }, {
      "id": "presssrelease",
      "name": "#presssrelease"
    }, {
      "id": "inversor-conference",
      "name": "#inversor-conference"
    }, {
      "id": "live release",
      "name": "#IACLive"
    }, {
      "id": "reval",
      "name": "#reval"
    }, {
      "id": "margin",
      "name": "#margin"
    }, {
      "id": "phonecall",
      "name": "#phonecall"
    }, {
      "id": "Q4",
      "name": "#Q4"
    }];
  
    $scope.tinyMceOptions = {
      init_instance_callback: function(editor) {
        $scope.iframeElement = editor.iframeElement;
      },
      resize: false,
      width: '100%',
      height: 150,
      plugins: 'print textcolor',
      toolbar: "bold italic underline strikethrough| undo redo",
      toolbar_items_size: 'small',
      menubar: false,
      statusbar: false
    };
  
  }
  </code></pre>
  
  <p>]);</p>
  
  <blockquote>
    <p>Note : This behavior is observed while using ment.io with tinymce</p>
  </blockquote>
  
  <p>can't figure out the fix for this..</p>
  
  <p>Please advice...</p>