Trying to achieve: A button that toggles the visibility of a div based on the checkbox state in an ng-repeat directive. Plunker
<button ng-click="toggleIt()">Toggle it</button>
<p>Check all</p>
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
<div ng-show="checkbox[0].selected && shownow">Slave one showed!</div>
<div ng-show="checkbox[1].selected && shownow">Slave two showed!</div>
<div ng-show="checkbox[2].selected && shownow">Slave three showed!</div>
app.controller('MainCtrl', function($scope) {
$scope.checkbox = [{
selected: false
}, {
selected: false
}, {
selected: false
}];
// Check/uncheck all boxes
$scope.checkAll = function() {
angular.forEach($scope.checkbox, function(obj) {
obj.selected = $scope.selectAll;
$scope.shownow = false;
});
};
$scope.shownow = false;
$scope.toggleIt = function() {
$scope.shownow = true;
}
$scope.$watchGroup(['checkbox[0].selected', 'checkbox[1].selected', 'checkbox[2].selected'], function(newValue, oldValue) {
if (newValue != oldValue) {
$scope.shownow = false;
}
});
});
Issue at hand: When unchecking one of the checkboxes, the associated div disappears when it's not supposed to...