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?

Answer 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