AngularJS Usage of Local/Global scope variables

Question

Below is my HTML code along with JS script. I need to Change the value of "label" after the button click but it is not changing and using global values only.

http://plnkr.co/edit/T4EaZglOnq8Q2UVLWNFm?p=preview

My preview/Plnkr can be seen here..

JS CODE:

var app = angular.module('myApp', []);


app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";
    $scope.year1=1992;
    $scope.year2=1994;
    $scope.year3=1996;
    $scope.label=[$scope.year1,$scope.year2,$scope.year3];
  $scope.splitYears = function()
  {      

      $scope.year1=2202;
      $scope.year3=2004;
      $scope.year2=2001;     

      $scope.checking=[$scope.year1,$scope.year2,$scope.year3];      
  }
   $scope.checking1=[$scope.year1,$scope.year2,$scope.year3];  
});

David L · Accepted Answer · 2015-08-03 16:44:02Z

2

You are never updating your $scope.label property inside of the click handler.

$scope.splitYears = {
    $scope.year1=2202;
    $scope.year3=2004;
    $scope.year2=2001;
    $scope.label=[$scope.year1,$scope.year2,$scope.year3];
    $scope.checking=[$scope.year1,$scope.year2,$scope.year3];    
}

You are also binding label to an array of objects, not an object directly.

As a result, there's no referenced value that is updated when you update your objects (since they're masked by the array) and AngularJS doesn't realize that it needs to update label.

If instead you bound $scope.label directly to $scope.year1, you would see label properly update on the UI.

Another option is to use a $watch/$watchCollection and automatically update your label outside of the click handler if your year changes.

$scope.array = [$scope.year1,$scope.year2,$scope.year3]
$scope.label = $scope.array;

$scope.$watchCollection("year1", function (newValue, oldValue) {
    $scope.label = [$scope.year1, $scope.year2, $scope.year3];
});

$scope.splitYears = function() {      
    $scope.year1=2202;
    $scope.year3=2004;
    $scope.year2=2001;
    $scope.checking=[$scope.year1,$scope.year2,$scope.year3];
}

edited Aug 3, 2015 at 16:44

answered Aug 3, 2015 at 16:24

David L

34.1k8 gold badges70 silver badges98 bronze badges

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

5 Comments

offeron Over a year ago

I m updating $scope.year1, $scope.year2, $scope.year3 inside the click event.. I want my output as Outside :[1992,1994,1996] Inside :[2202,2001,2004] [2202,2001,2004]

offeron Over a year ago

So I need to create years object and assign to label ?

David L Over a year ago

What are you actually trying to accomplish? Your comment above changed my understanding of your question.

offeron Over a year ago

Once Check the plunk.. I need to assign the $scope.year1 that been changed inside the button click handler to a new $scope.variable(Outside the click handler) and show it on UI.

David L Over a year ago

@offeron I've added an additional option that won't interfere with your click logic.

Collectives™ on Stack Overflow

AngularJS Usage of Local/Global scope variables

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related