Search code examples
angularjsscoperootscope

rootScope is upating on scope variable update

I have created a rootScope variable like

$rootScope.globalData = data;
$rootScope.globalData.chillerConditions.HeatSource.Value = "ST";    //Default Value
$scope.chillerConditions.HeatSource.Value = 1;                      //Default Value

where data is my returning value from api. Also create a scope variable which is a object contains a list of items.

$scope.chillerAttributes = data.ObjCandidateListChillerAttributes;
$scope.chillerConditions = data.ObjCandidateListConditions;

On HTML I have:

<select ng-model="chillerConditions.HeatSource.Value" style="width:53%;" ng-options="item.Id as item.Description for item in ValidRatingHeatSource" ng-change="heatSourceChanged()" id="ddRatingHeatSource" class="form-control search-select designComboboxHeight" data-container="body"></select>

Here ValidRatingHeatSource is 

$scope.ValidRatingHeatSource = \*list of items*\

On change of Drop Down I have written an function. In that

if($scope.chillerConditions.HeatSource.Value == 2)
{
  $rootScope.globalData.chillerConditions.HeatSource.Value = "HW";
}
else
{
  $rootScope.globalData.chillerConditions.HeatSource.Value = "ST";
}

Till now was the my current code. Issue is :

When the above function is called then whenever current $rootScope varible i.e. $rootScope.globalData.chillerConditions.HeatSource.Value is changed to "HW" or "ST" it also changing $scope.chillerConditions.HeatSource.Value to "HW" or "ST".

Why so?

Is there any inbuilt functionality in angularjs? Please suggest if I am making any mistake? New suggestion are also welcome.

Solution

  • This behavior is the way JavaScript works and has nothing to do with AngularJS. JavaScript is an object-oriented (prototype-based) language where objects are addressed by reference and not by value. E.g. assign car2 to car1 and both of them will reference the same object (JSFiddle)

    var car1 = {make: "Audi"}
var car2 = car1;
car2.make = "Toyota";

    So in your case, $rootScope.globalData.chillerConditions.HeatSource and $scope.chillerConditions.HeatSource are the same object.

    Rather, it seems like you want to create a copy. You can do so with angular.Copy

    $scope.chillerAttributes = angular.copy(data.ObjCandidateListChillerAttributes);
$scope.chillerConditions = angular.copy(data.ObjCandidateListConditions);