JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div ng-app="testApp" ng-controller="TestController">
<ul ng-repeat="item in data">
<input type="checkbox" ng-checked="item.displayed > 0" ng-indeterminate="item.displayed > 0 && item.displayed < item.total" />
{{item.name}} ({{item.displayed}}/{{item.total}})
</ul>
</div>
JavaScript
angular.module('testApp', [])
.controller('TestController', function($scope) {
$scope.data = [
{name: 'foo', displayed: 2, total: 4},
{name: 'bar', displayed: 3, total: 3}
];
})
.directive('ngIndeterminate', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
attributes.$observe('ngIndeterminate', function(value) {
element.prop('indeterminate', scope.$eval(value));
});
}
};
});