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

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

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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