Angular: Empty Fiddle
http://angularjs.org/
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="organization in boundaryPartners">
<div ng-repeat="partner in organization.partners">
<label>
<input type="checkbox" value="partner.id" ng-model="partner.selected"
ng-change="changeValue(partner, organization, $parent.$index)"/>
{{partner.name}}
</label>
</div>
<hr/>
</div>
<pre>{{participatingPartners | json}}</pre>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.boundaryPartners = [
{
id: 1,
name: 'Organization 1',
partners: [ {id:1, name: "Partner 1_1"}, {id:2, name: "Partner 1_2"}, {id:3, name: "Partner 1_3"} ]
},
{
id: 2,
name: 'Organization 2',
partners: [ {id:1, name: "Partner 2_1"}, {id:2, name: "Partner 2_2"}, {id:3, name: "Partner 2_3"} ]
}
];
$scope.participatingPartners = []
var idsArray = [];
$scope.changeValue = function(partner, organization, index){
if(partner.selected)
addPartner(partner, organization, index);
else
removePartner(partner, organization, index);
};
var addPartner= function(partner, organization, index){
prepareArrayToAdd(organization, index);
if(!existInList(index, partner)){
$scope.participatingPartners[index].partners.push(partner);
}
};
var prepareArrayToAdd = function(organization, index){
if(!$scope.participatingPartners[index])
$scope.participatingPartners[index] = { id: organization.id, name: organization.name, partners: [] };
};
var removePartner= function(partner, organization, index){
idsArray = getIdsArray(index);
var indexToRemove = idsArray.indexOf(partner.id);
if(indexToRemove == -1)
return;
$scope.participatingPartners[index].partners.splice(indexToRemove, 1);
};
var existInList = function(index, partner){
idsArray = getIdsArray(index);
return idsArray.indexOf(partner.id) != -1;
};
var getIdsArray = function(index){
return $scope.participatingPartners[index].partners.map(function(partner){ return partner.id });
};
});