scope variable not getting reset - AngularJS

Question

I have a function in my angularJS controller that gets invoked on a dropdown option change:

Currently, a default option will be chosen and the records under that corresponding option will be picked from DB and set to a scope variable.

This works fine. Now, when the option is changed,

$scope.optionChanged = function() {
     $('#loading').show();
     $('#recordForm').trigger("reset");
     var data = {
         'id': $scope.data.id,
     };
     $rootScope.idChange = data.catId;
     if($scope.id !== undefined){
         $http({
             'url': '/pendingCount',
             'method': 'POST',
             'headers': {
                 'Content-Type': 'application/json'
             },
             'params': data
         })
         .then(
             function(
                 response) {
                 $scope.pendingCount = response.data.pendingCount;
                 if (($scope.pendingCount !== 0) && ($scope.pendingCount !== null) && ($scope.pendingCount !== undefined)) {
                     $http({
                         'url': '/customerRecord',
                         'method': 'POST',
                         'headers': {
                             'Content-Type': 'application/json'
                         },
                         'params': data
                     })
                     .then(
                         function(
                             response) {
                             $('#loading').hide();
                             $scope.record = response.data;
                             console.log($scope.record);
                         })
            });
     } else {
         $("#noActive").show()
     }
}

Checked that $scope.record is printing the desired result in console. But the scope variable is not reflecting in UI.

Have even tried the $scope.$apply as well as the suggestion provided in this answer. But no luck.

Can someone please help?

No errors in your console? Side note, dont mix jQuery and Angular like you're doing - it'll cause problems sooner or later — tymeJV, Feb 10 '19 at 13:30
How are you using it in the UI? Are you sure the $scope where you are using it is the same as the $scope of the code? — georgeawg, Feb 10 '19 at 13:34
Also to check - are you *sure* it's the data you're expecting? Like if you're expecting a single record object, are you sure it's that, not an array with a single record? — tymeJV, Feb 10 '19 at 13:34
No errors @tymeJV. Thanks for your guidance. Will cleanup the code soon. I have exactly maintained the same code that is being used to displaying default drop down records as mentioned in the question. The data is of the same type. — Mike, Feb 10 '19 at 13:35
Create a demo in a sandbox site like plunker, codepen, jsfiddle etc that reproduces the problem — charlietfl, Feb 10 '19 at 13:37
Hard to tell without a demo - other things that come to mind - different controllers possibly (child/parent scope issue) or out of controller scope. You can put an ID on your parent controller, then do `angular.element("document.getElementById("yourIDhere")).scope().record` in the console and verify the output is still correct. — tymeJV, Feb 10 '19 at 13:40
You guys are great !! Actually I have double used by ng-controller inside my html page at 2 different locations. I got to know that this is an issue. But don't know in what way and how it is affecting. Any idea guys? — Mike, Feb 10 '19 at 14:00
Each instance of the controller has it's own scope and knows nothing about the other instance(s) — charlietfl, Feb 10 '19 at 14:04
Hi Michael. You're missing a closing curly bracket for the following if statement: if (($scope.pendingCount !== 0) && ($scope.pendingCount !== null) && ($scope.pendingCount !== undefined)) { ...i think you need to add it after the last .then() — Sarah, Feb 10 '19 at 14:06
Let me know if it works properly after you add the bracket. If it still doesn't work then I think it might be to do with the fact that http requests return promises. Side note: Its a good idea to keep your controller code to a minimum and put any extra code in methods in a factory (so you could put your http requests in methods in a factory and then call them from your controller. This is what I normally do with angular JS) — Sarah, Feb 10 '19 at 14:18
Yes @Sarah. Thanks for pointing. I have that in my code. But have missed here while copying here. — Mike, Feb 10 '19 at 14:35
@Sarah nothing wrong with OP's handling of the $http promise. Also it wouldn't print correct value to console (as noted in question) if the promise wasn't handled properly. — charlietfl, Feb 10 '19 at 14:43
@charlietfl I'm sorry you misunderstood me. I wasn't contradicting how he handled the promise and it was clear to me he was getting a successful response from the http request. i was more concerned about the way the response is added to $scope. Apparently it doesn't work as you would expect. The last answer on this page explains the problem a bit better: https://stackoverflow.com/questions/32912637/saving-an-http-response-object-as-a-scope-variable It suggests to use $scope.$apply() after updating the scope. However Michael said he has tried this. — Sarah, Feb 10 '19 at 15:27
@Sarah `$http` callbacks will handle `$apply` internally. Adding it yourself usually throws digest in progress error. OP's whole issue is related to multiple controller instances as noted above — charlietfl, Feb 10 '19 at 15:33

score 1 · Accepted Answer · answered Feb 10 '19 at 16:21

1

Actually I have double used by ng-controller inside my html page at 2 different locations. I got to know that this is an issue. But don't know in what way and how it is affecting. Any idea guys?

 <div ng-controller="myCtrl">
     <select ng-model="data.id" ng-change="optionChanged()">
     </select>
 </div>

 <div ng-controller="myCtrl">
     {{record}}
 </div>

In the above scenario, two controllers are created with different scopes. Changes to scope variables in the first instance of the controler will not be seen in the scope of the second instance.

For more information, see AngularJS Developer Guide - Scope Hierarchies

answered Feb 10 '19 at 16:21

georgeawg

48,608
13
72
95

Yes @georgeawg. But my declaration were on two div's, when one of the div was inside an other. – Mike Feb 10 '19 at 16:34
1

It’s really hard to answer a question about a bug in code when *the question doesn’t include any of the buggy code.* The problem is caused by a buggy template but the question does not include the buggy template. – georgeawg Feb 10 '19 at 16:38

scope variable not getting reset - AngularJS

1 Answers1