'Angular $scope variable not updating

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?

javascript angularjs

Solution 1:^[1]

Actually this has been discussed in more links.

Don't use primitive type variable. Instead of that use object in scope.

For example, Don't use like $scope.primitiveVariale instead of this $scope.object={primitiveVariale:null}

So in view use like object.primitiveVariale then this will be reflect in all the view. Please see the following links.

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Solution 2:^[2]

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;
});

Solution 3:^[3]

The ng-if directive create a new scope, so the letter_content inside the div is in the ng-if scope, but the letter_content outside is in the controller scope.

Read the API doc to know which directive create new scope.

To avoid this kind of problem consider using the controllerAs syntax

Solution 4:^[4]

Do not use plain values like this, you need to put such values into an object, so try in your controller:

$scope.obj = { letter_content: null};

and then in your view:

{{obj.letter_content}}

Solution 5:^[5]

can you ever heard of angular's dot notation?

solution

put letter_content in an object. froalaDetails.letter_content for example. then update that value and everything should work exactly like you want.

explanation

watch this very short video to get the full details: https://egghead.io/lessons/angularjs-the-dot

Solution 6:^[6]

Try this -

 $scope.object = {letter_content:null};

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

Solution 7:^[7]

I was scratching my head for 3 days and finally could able to resolve the issue by $rootScope, I have used $rootScope and the value is automatically updating the view (HTML template).

Controller:

$rootScope.myVariable = 'update label'

Now if you update the value of myVariable via any click/change events the updated value will be updated in the HTML template.

HTML file:

<h3>{{myVariable}}</h3>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Saumil
Solution 3	fantarama
Solution 4	Antipod
Solution 5	Community
Solution 6	Ranjit Sahu
Solution 7	Pradeep Yenkuwale

'Angular $scope variable not updating

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]