Using a group of checkboxes in Angularjs - angularjs

Question

Im having the following problem:
i have a group of checkboxes and an indifferent check too, in the database if indifferent is checked then an empty array is saved.
I have 2 use cases:
1) if indifferent is checked, the rest is not, as soon as i check another checkbox indifferent is unchecked (This is actually working)
2) if i select all checkboxes (except indifferent), all should be unchecked and indifferent should be checked. (This is not working)
Here is an extract of my code
http://jsfiddle.net/ngbYW/
1) To test first use case:
Indifferent is checked, as soon as you click Married, indifferent is unchecked, if u click again on Married to uncheck, indifferent is checked.
2) click on Single, Relationship and Married to get them checked, then indifferent is checked AND the last one where u clicked is checked too!
Hope im clear enough.
What im doing wrong? Any help or suggestion will be appreciated.
Here is my code
HTML
<div ng-app="">
<div ng-controller="MyCntrl">
<label class="control-label">Family status</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="item in familystatus"><input type="checkbox" ng-click="addToSearchedProfile(item.id,'familystatus')" ng-checked="isChecked(item,'familystatus')" >{{item.text}}</label>
<label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'familystatus')" ng-checked="userSearchedProfile.familystatus.length=='0'">indifferent</label>
</div>
<label class="control-label">Sexuality</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="item in sexuality"><input type="checkbox" ng-click="addToSearchedProfile(item.id,'sexuality')" ng-checked="isChecked(item,'sexuality')" >{{item.text}}</label>
<label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'sexuality')" ng-checked="userSearchedProfile.sexuality.length=='0'">indifferent</label>
</div>
</div>
</div>
CONTROLLER
function MyCntrl($scope) {
$scope.familystatus = [{id:1,text:'Heterosexual'},{id:2,text:'Bisexual'},{id:3,text:'Homosexual'}];
$scope.sexuality = [{id:1,text:'Single'},{id:2,text:'Relationship'},{id:3,text:'Married'}];
$scope.userSearchedProfile = {
familystatus : [1],
sexuality : []
};
$scope.isChecked = function(item, type) {
return $scope.userSearchedProfile[type].indexOf(item.id)!==-1;
};
$scope.addToSearchedProfile = function(id, item) {
if (angular.isUndefined(id)) {
$scope.userSearchedProfile[item].length=0;
return;
}
if ($scope.userSearchedProfile[item].indexOf(id) === -1) {
$scope.userSearchedProfile[item].push(id);
} else {
$scope.userSearchedProfile[item].splice($scope.userSearchedProfile[item].indexOf(id), 1);
}
if ($scope[item].length === $scope.userSearchedProfile[item].length){
$scope.userSearchedProfile[item].length=0;
}
};
}

Answer 1

inter-restricting / counter acting form elements are very confusing
to me too.
I usually attack this kind of problem by defining a view model
which represents the form state and let javascript code to handle
the coordination rather than reacting to the indivisual events.
here is the simplified example: http://jsfiddle.net/4TBFn/
in template:
<label class="checkbox inline" ng-repeat="item in sexuality">
<input type="checkbox" ng-model="item.selected"/>{{item.text}}
</label>
<label class="checkbox inline">
<input type="checkbox" ng-model="indifferent"/>indifferent
</label>
in controller:
$scope.$watch('indifferent', function(v) {
if (!v) return;
for ( var i = 0; i < $scope.sexuality.length; ++i ) {
$scope.sexuality[ i ].selected = false;
}
});
$scope.$watch('sexuality', function(arr) {
var selected = arr.reduce(function(s, c) { return s + (c.selected ? 1 : 0); }, 0);
if ( selected === arr.length ) {
$scope.indifferent = true;
} else if ( selected > 0 ) {
$scope.indifferent = false;
}
}, true );