get checkbox group values in angular watch

Question

when tick on each checkbox, i can get all the checked values.

i want to put these values to their respective group.

here are my expected result :

{
  'pattern' : ["Plain","Self Design"],
  'colour' : ["Blue","Grey"]
}

im using angular $watch to get the selected values.

$scope.$watch('filters|filter:{selected:true}', function (nv, ov, scope) {
    $scope.filter_selected = [];

angular.forEach(nv, function (value) {
    angular.forEach(value.options, function (v, k) {
        if (v.selected == true) {
            this.push(v.name);
        }
    }, $scope.filter_selected);
});
}, true);

here is the full code in fiddle

UPDATE:

i manage to get my expected result with these code :

$scope.$watch('filters|filter:{selected:true}', function (nv, ov, scope) {
    $scope.filter_selected = {pattern: [], colour: []};
    angular.forEach(nv, function (value) {
    if (value.name == 'pattern') {
        angular.forEach(value.options, function (v, k) {
            console.log(this);
            if (v.selected == true) {

                this.push(v.name);
            }
        }, $scope.filter_selected.pattern);
    }

    if (value.name == 'colour') {
        angular.forEach(value.options, function (v, k) {
            //console.log(this);
            if (v.selected == true) {

                this.push(v.name);
            }
        }, $scope.filter_selected.colour);
    }            
});

updated fiddle

now, how to make my checking part dynamic if i have more groups?

Answer 1

I have updated your code to simplify what you have above, hopefully achieving the outcome you want. I don't really think you need the watch (unless your update requirements are more complicated), but you should be able to build upon this never the less.

http://jsfiddle.net/j35zt/

The controller code was simplified as follows:

app.controller('FilterCtrl', function ($scope, $http) {

    $scope.filters = [
        { name: 'pattern', placeholder: 'pattern',
          options: [
              { name: 'Plain', selected: false },      
              { name: 'Self Design', selected: false },      
              { name: 'Check', selected: false },      
              { name: 'Stripe', selected: false },      
              { name: 'Print', selected: false }
          ]},
        { name: 'colour', placeholder: 'colour',
          options: [
              { name: 'White', selected: false },
              { name: 'Blue', selected: false },
              { name: 'Grey', selected: false }
          ]}
    ];   

    $scope.updateOutput = function() {        
        $scope.filter_selected = {};
        angular.forEach($scope.filters, function(f) {
            $scope.filter_selected[f.name] = [];
            angular.forEach(f.options, function(o){
                if(o.selected){
                    $scope.filter_selected[f.name].push(o.name);   
                }
            });
        });
    } 
});

Just note, that the view also needed to be changed to match the controller. Basically ng-change is the sole cause of the updating.