在光标指针处插入值以及如何分配给ng-model - Angularjs

Question

我能够在光标指针处插入值，但无法将textarea值分配给ng-model。

app.directive('myText', ['$rootScope', function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      $rootScope.$on('add', function(e, val) {
        var domElement = element[0];

        if (document.selection) {
          domElement.focus();
          var sel = document.selection.createRange();
          sel.text = val;
          domElement.focus();
        } else if (domElement.selectionStart || domElement.selectionStart === 0) {
          var startPos = domElement.selectionStart;
          var endPos = domElement.selectionEnd;
          var scrollTop = domElement.scrollTop;
          domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
          domElement.focus();
          domElement.selectionStart = startPos + val.length;
          domElement.selectionEnd = startPos + val.length;
          domElement.scrollTop = scrollTop;
        } else {
          domElement.value += val;
          domElement.focus();
        }

      });
    }
  }
}]);

$scope.insertValue = function(value, type) {
  $rootScope.$broadcast('add', value);
  //$scope.model.userApprovalMessage = $scope.model.userApprovalMessage + "   " + value; 
  $scope.model.userApprovalMsgLength = 300 - parseFloat($scope.model.userApprovalMessage.length);

};

<div class="btn-group" style="float: left; margin-left: 5px;">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-class="model.webPageSkin3">Insert Tag</button>
  <ul class="action-dropdown dropdown-menu ">
    <li ng-click="insertValue('$Name')"><a>$Name</a></li>
    <li ng-click="insertValue('$Groupz')"><a>$Groupz</a></li>
  </ul>
</div> <br>
<br>
<div class="row">
  <textarea class="compose-msg-area form-control compose-textarea" style="border: 1px solid #ddd; white-space: pre-wrap; margin-left: 20px;" ng-model="model.userApprovalMessage" placeholder="Text Message" maxlength="300" ng-change="userApprovalMessageLength(model.userApprovalMessage)"
    my-text="">
                            </textarea>

</div>
<div class="row">
  <div class="col-sm-3"><input type="text" class="form-control" numbers-only disabled style="border: 1px solid #ddd; width: 40px; background-color: #fff; padding: 5px; height: 30px; margin-top: -20px; font-weight: 600; margin-left: 5px;" ng-model="model.userApprovalMsgLength">
    <label class="pull-right text-left1" for="street">text left</label>
  </div>
</div>

我需要显示$scope.model.userApprovalMessage长度。当我尝试在光标指针处插入$ Name时。我可以添加，但模型值没有变化。