Angular $scope variable not updating

Question

In my angular, I define a scope variable $scope.letter_content. When the view is loaded, I load string from my database and set it to $scope.letter_content. Then, I populate on a texteditor(Froala) i'm using.

Below is the code for the view:

    {{letter_content}}
    <div ng-if="formData['page_number'] == 1 ">
        {{letter_content}}
        <textarea id="froala-sample-2" froala="froalaOptions" ng-model="letter_content"></textarea>
    </div>

So basically I set letter_content as ng-model for the texteditor. So when I make changes on the texteditor, it modifies the value $scope.letter_content.

One thing I found it weird is that when I modify the text in the texteditor, it changes {{letter_content}} inside the div. However, it does not update {{letter_content}} outside the div.

When I'm done editing the text in my texteditor, I send send a put request to update the value in the database with $scope.letter_content. However, it ends up sending {{letter_content}} outside the div which ends up not updating the content.

Why is this weird thing happening?

Answer 1

I had very similar but even weirder problem where I was updating one of my scope variables using the response from an HTTP call, surprisingly, my view will not update unless I make another HTTP call and by another I mean any other random HTTP call.

Using the $apply worked for me,

$scope.$apply(function () {
     $scope.resultData.totalResults = response.data.total;
});