Home angularjs $scope.$watchCollection on nested JSON document
Reply: 0

angularjs $scope.$watchCollection on nested JSON document

user2214 Published in March 18, 2018, 2:06 am

I'm having troubles with the $watchCollection() function. The problem might be the fact that I'm trying to reference a nested part of a JSON document. I really can't figure the problem out.


<div ng-app="MovieApp">
  <div ng-controller="FilterController as FilterCtrl" ng-init="FilterCtrl.init()">
    <ul ng-repeat="filter in filters">
      <li ng-repeat="element in filter.elements">
        <input type="checkbox" ng-model="element.ticked" />{{element.name}}


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

app.controller('FilterController', function($scope){
  this.init = function(){
    $scope.filters = jsonfilters;

  $scope.$watchCollection('filters', function(newValue,oldValue){
    alert("A filter has been changed");


var jsonfilters = [
  "name": "Genres",
  "elements": [
    {"name": "Adventure", "ticked": true},
    {"name": "Action", "ticked": true},
    {"name": "Fantasy", "ticked": true},
    {"name": "Science Fiction", "ticked": true},
    {"name": "Family", "ticked": true},
    {"name": "Thriller", "ticked": true},
    {"name": "Animation", "ticked": true},
    {"name": "Comedy", "ticked": true},
    {"name": "Drama", "ticked": true}
  "name": "Companies",
  "elements": [
    {"name": "Warner Bros.", "ticked": true},
    {"name": "Walt Disney Pictures", "ticked": true},
    {"name": "Paramount Pictures", "ticked": true},
    {"name": "Columbia Pictures", "ticked": true},
    {"name": "DreamWorks Animation", "ticked": true},
    {"name": "Universal Pictures", "ticked": true},
    {"name": "Twentieth Century Fox Film Corporation", "ticked": true},
    {"name": "Legendary Pictures", "ticked": true},
    {"name": "Marvel Studios", "ticked": true},
    {"name": "Village Roadshow Pictures", "ticked": true},
    {"name": "Jerry Bruckheimer Films", "ticked": true}

What I want to achieve is being able to call a function everytime one of the checkboxes are ticked/unticked. I made a jsfiddle to demo the problem.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.303083 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO