$scope not updating

Question

Hi all I was working on one sms system, where I need to use text area as input field, and with some drop down, these drop downs are like predefined templates which user can select, edit and send.

I am facing some issues while manually typing message and sending it, I can't able to use template anymore, I don't know why $scope.var is not getting updated. Please help

Html -

<textarea id="typeMessageBox" placeholder="Write here and hit enter to send..."  ng-keypress="getkeys($event)"  rows="4" class="form-control-lg form-control" ng-model="newMessageContent">
</textarea>

<div class="input-group-prepend">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-info" ng-click="setSelectedTemplate('Clear')">SMS<br/>Template</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
<button type="button" tabindex="0" class="dropdown-item" ng-click="setSelectedTemplate('First')">First Template</button>
<button type="button" tabindex="0" class="dropdown-item" ng-click="setSelectedTemplate('Second')">Second Template</button>

</div>
</div>

Controller -

$scope.setSelectedTemplate = (type) => {
switch (type) {
case "First":
$scope.newMessageContent = "First template";
break;
case "Second":
$scope.newMessageContent = "Second template";
break;
case "Clear":
$scope.newMessageContent = "";
break;
}
}

$scope.getkeys = function (event) {
if(event.keyCode == 13) {
       $scope.sendMessage($("#typeMessageBox").val());
  }
 }

send message function :-

$scope.sendMessage = function (message){
            if(message=='') return;
            if($scope.sendingMessage==true) return;
            $scope.sendingMessage = true;
            toastr["info"]("Sending message..", "Please wait..!");
            let data = {
                "sessionId" : $scope.currentSessionID,
                "fromSignalWirePhoneNo": $scope.selectedNumber,
                "messageBody": message,
                "toPhoneNo": "+"+"<?=$patientNumber?>".trim()
            }

            var messageSettings = {
                "url": "xxxxx",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Authorization": "Bearer xxxx",
                    "Content-Type" : "application/json"
                },
                "data": JSON.stringify(data)
            };

            $.ajax(messageSettings).done(function (response) {
                toastr["success"]("SMS sent successfully.", "Sent!")
                $scope.newMessageContent="";
                $('#typeMessageBox').val('')
                $scope.sendingMessage = false;
                $scope.getAllSessions(false);
                $scope.getMessageLogs($scope.currentSessionID);
                $scope.$apply()
            }).fail(function (err) {
                toastr["error"]("SMS sending failed.", "Failed!");
                $scope.sendingMessage = false;
                $scope.$apply();
            });
        }

Issue - Everything works fine if I use templates and send them, but as long as I type message inside text area manually it won't populate the templates inside text area.... where I am going wrong please help.

Answer 1

I resolved the issue by making a parent of the $scope.newMessageContent, I have changed it into = $scope.message =[]; & $scope.message.newMessageContent=""; its working fine now.