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
– tymeJV, Commented Feb 10, 2019 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
– georgeawg, Commented Feb 10, 2019 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
– tymeJV, Commented Feb 10, 2019 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
– Mike, Commented Feb 10, 2019 at 13:35
Create a demo in a sandbox site like plunker, codepen, jsfiddle etc that reproduces the problem — charlietfl
– charlietfl, Commented Feb 10, 2019 at 13:37

georgeawg · Accepted Answer · 2019-02-10 16:21:19Z

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, 2019 at 16:21

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Over a year ago

Yes @georgeawg. But my declaration were on two div's, when one of the div was inside an other.

georgeawg Over a year ago

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.

Collectives™ on Stack Overflow

scope variable not getting reset - AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related