how to watch an array in angularjs

Question

Trying to watch an array ('CurrentDetails'). But the data is empty inside the watch function, after updating it. where am i going wrong here.

myctrl.js:

 app.controller("myctrl", function ($scope, SharedService) {
       $scope.CurrentDetails = [];

      var init = function(){
      var data = {
                OptionsType: "LanguageOptions",
                OptionItems: [{ "OptionId": 1, "OptionName": "English"}],
                Breadcrumbs: ["Home"]
            }                
            $scope.ShowResponse(data);
     }
     $scope.ShowResponse = function (data) {
        $scope.CurrentDetails = data;  
        console.log($scope.CurrentDetails); //can see the data here
     }

       $scope.$watch('CurrentDetails', function () {
        console.log($scope.CurrentDetails); //no data here 
        SharedService.updateCurrentDetails($scope.CurrentDetails);
      },true);
       $scope.$on('valuesUpdated', function () {        
          $scope.CurrentDetails = SharedService.CurrentDetails;        
      });

       init();
    }

sharedservice.js:

app.service("SharedService", ['$rootScope', function ($rootScope) {
 var service = {};
 service.CurrentDetails = [];
 service.updateCurrentDetails = function (value) {
        this.CurrentDetails = value;
        $rootScope.$broadcast("valuesUpdated");
    }

}]);

http://jsfiddle.net/U3pVM/13977/

There's $watchCollection to watch for changes in the array — New Dev
– New Dev, Commented Mar 11, 2015 at 13:02
try $scope.$watch('CurrentDetails', function (newVal, oldVal) { console.log(newVal); SharedService.updateCurrentDetails(newVal); },true); it should work — Pankaj Parkar
– Pankaj Parkar, Commented Mar 11, 2015 at 13:08
@NewDev.Tried with $watchCollection. I see empty [] in the console, still — sukesh
– sukesh, Commented Mar 11, 2015 at 13:11

Community · Accepted Answer · 2017-05-23 12:06:24Z

2

trigger the init function at the end of the controller.

Anonymous functions referenced by variables will be initialized lazily.

For more details check this

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Mar 11, 2015 at 13:13

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

5 Comments

Vinay K Over a year ago

Do you have any plnkr/fiddle for this?

Vinay K Over a year ago

Watch is fired with the values, Please have a look at jsfiddle.net/U3pVM/13979

sukesh Over a year ago

@Vinay.Other than the console.log, could you please tell me the other changes made. I still get empty arrays [] [] in code

Vinay K Over a year ago

declared the module ng-app="myApp" in the markup.

Pankaj Parkar Over a year ago

@VinayK +1 Good catch. you played with variables :p

Collectives™ on Stack Overflow

how to watch an array in angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related