Here is a fiddle that does what you want: http://jsfiddle.net/2jVtH/
I have replaced the entire HTML with a directive, called cbb
, used as:
<div cbb question="question" response="response"></div>
(this makes the original code cleaner too, IMHO, meaning I would do the same for the radio button)
The directive uses an isolated scope and in it puts an object that receives the check box values:
scope.model = {}
A deep $watch
on this object updates an array with the values, so you get the desired response = { "789012": ["7", "8"] }
format.
Directive full code:
surveyApp.directive("cbb", function() {
return {
restrict: "A",
scope: {
question: "=",
response: "="
},
template:
"<div class='text'>{{question.question}}</div>" +
'<div class="options" ng-repeat="option in question.options">' +
'<input type="checkbox" ng-model="model[option.id]" value="{{option.id}}"/> {{option.value}}' +
'<tags ng-if="option.tags"></tags>' +
'<action ng-if="option.action"></action>' +
'</div>',
link: function(scope, element, attrs) {
if( !scope.response[scope.question.id] ) {
scope.response[scope.question.id] = [];
}
var result = scope.response[scope.question.id];
scope.model = {};
scope.$watch("model", function(newval) {
var x;
result.splice(0);
for( x in newval ) {
if( !newval.hasOwnProperty(x) ) continue;
if( newval[x] ) result.push(x);
}
}, true);
}
};
});