AngularJS's ng-model icm textarea

Question

I'm trying to add some text to the last cursor place after clicking a button.

In the controller:

$scope.addEmoji = function(name){
    var element = $("#chat-msg-input-field");
    element.focus(); //ie
    var selection = element.getSelection();
    var textBefore = $scope.chatMsg.substr(0, selection.start);
    var textAfter = $scope.chatMsg.substr(selection.end);
    $scope.chatMsg = textBefore + name + textAfter;
}               

$scope.updateChatMsg = function(chatMsg){
    $scope.chatMsg = chatMsg;
}

$scope.sendChatMsg = function(){
    var backend = $scope.convs[$scope.active.conv].backend.name;
    $scope.view.addChatMsg($scope.active.conv, $scope.active.user, $scope.chatMsg,new Date().getTime() / 1000, backend);
    Chat[backend].on.sendChatMsg($scope.active.conv, $scope.chatMsg);
    $scope.chatMsg = '';
};

And then some HTML:

<div class="chat-msg-button" >
    <button ng-click="view.toggle('emojiContainer')" ><img src="/apps/chat/img/emoji/smile.png"></button>
</div>
<form id="chat-msg-form" ng-submit="sendChatMsg()">
    <div class="chat-msg-button" >
        <button  type="submit"><div class="icon-play">&nbsp;</div></button>
    </div>
    <div id="chat-msg-input">
        <textarea  id="chat-msg-input-field" autocomplete="off" type="text" ng-model="chatMsg" ng-change="updateChatMsg(chatMsg)" placeholder="Chat message"></textarea>    
        <div>{{ chatMsg }}</div>
    </div>
</form>

What I'm trying to achieve: a user types some text in the textarea => $scope.chatMsg gets the value of the textarea. Now the user press one of the button's => the name of the button is added to the latest cursor position. (it's no problem to find the latest cursor position)

The problem

There is a difference between the value of $scope.chatMsg, {{ chatMsg }} inside the div and the text in the textarea. The contents of the textarea and the div stays always the same. But when pressing the button the name is added to $scope.chatMsg but the contents of the textarea isn't changed...

How can I solve this? TIA

Answer 1

I solved all problems. The plunkr form above works. So after investigating all scopes with the Angular chrome extension I saw that chatMsg was defined in another scope. Thus not in the scope I was trying to acces it from. Via this question angularJS ng-model input type number to rootScope not updating I found a solution. I added chatMsg to the fields object.

Answer 2

First of all, you're mixing jQuery with AngularJS, it doesn't look like you need jQuery here that much.
Also, your chat message is updated in 3 different functions, so you need some debugging to see which are fired.

In general:
To solve your issue, try some more debugging, do a

$scope.$watch($scope.chatMsg, function(){
    console.log($scope.chatMsg);
});

this will watch all changes to chatMsg. Add console.log() to each of your functions and you can watch which is fired.

Also, rather than using {{ }} inside your div just use ng-bind since that text is the only item in your div, it's cleaner if your app crashes somewhere.

// change from
<div>{{ chatMsg }}</div>
// to
<div ng-bind="chatMsg "></div>

---

Update: after seeing your plunker, I modified it and came up with this: http://plnkr.co/edit/oNKGxRrcweiJafKCm9A5?p=preview

Your ng-repeat needs to be tracked by $index so that duplicates are displayed rather than crashing when someone creates the same message