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?

Let's do a small experiment - change `ng-if` to `ng-show`, if it worked I'll write a detailed answer — AranS, Aug 04 '16 at 09:28
@AranS Yes it is `ng-show` . Thanks for pointing that out mate. Cheers! — Anjana Silva, Mar 13 '19 at 14:29

score 27 · Answer 1 · answered Apr 27 '17 at 20:48

27

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

answered Apr 27 '17 at 20:48

Saumil

2,521
5
32
54

1

Thanks, this was useful and $apply worked for me for similar situation. – codingbbq Dec 13 '17 at 06:30
2

`.$applyAsync` should even prevent `Error: [$rootScope:inprog]` – Sasi Varunan May 13 '19 at 13:41
Its working but there is issue that it doesn't change the value in the form if the are changed and post for saved request, they remain the same as they are in check boxes when they were applied... I don't whats that issue. – Farid Abbas Aug 25 '19 at 08:46
1

Can someone explain why this works? It worked for me. – Kosi Dec 31 '19 at 19:57

score 25 · Accepted Answer · 2016-08-04T09:55:28.430

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

score 7 · Answer 3 · answered Aug 04 '16 at 09:34

7

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

answered Aug 04 '16 at 09:34

fantarama

862
6
14

"The ng-if directive create a new scope". Thank you! I change to ng-show and it started work. – Mroczny Arturek Jan 25 '22 at 16:26

score 4 · Answer 4 · answered Aug 04 '16 at 09:37

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

answered Aug 04 '16 at 09:37

Antipod

1,593
3
23
43

score 3 · Answer 5 · edited Jun 20 '20 at 09:12

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 04 '16 at 09:35

Bamieh

10,358
4
31
52

this video is accessible on a paid plan - is there any other reference for your answer. – Abdeali Chandanwala Jul 08 '19 at 10:39

score 2 · Answer 6 · answered Aug 04 '16 at 10:39

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>

score 0 · Answer 7 · answered May 03 '22 at 14:16

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>

Angular $scope variable not updating

7 Answers7

solution

explanation

Linked