0

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.

Romesh
  • 2,291
  • 3
  • 24
  • 47
  • The `ng-model` (`chillerConditions.HeatSource.Value`) maybe is attached to both `$scope.chillerConditions.HeatSource.Value` and `$rootScope.chillerConditions.HeatSource.Value`. So when the select changes so does the variable attached to `ng-model`. Not sure about this but it could be worth a try re-naming the `$scope` variable. – simeg Dec 29 '14 at 12:12

2 Answers2

2

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);
Rei Mavronicolas
  • 1,387
  • 9
  • 12
  • I understood the JSfiddel example. Right now I am not marking as Accepted, but as soon as I resolve the issue will mark it as Accpted Ans. Thanks – Romesh Dec 29 '14 at 13:22
1

In your example u have both ng-model and ng-change, so: 1. User change value in select. 2. $scope.chillerConditions.HeatSource.Value changes (ng-model) 3. heatSourceChanged starts (ng-change) -> $rootScope.globalData.chillerConditions.HeatSource.Value changes

So everything works as should...

Petr Averyanov
  • 9,327
  • 3
  • 20
  • 38