Вот так нужно?<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<style type="text/css">
body {
background-color: #232323;
}
</style>
<script type="text/javascript">
var app = angular.module('CheckBoxApp', []);
app.controller('FilterController', ['$scope', function($scope){
$scope.filters = {id: 2};
$scope.allFilms = [
{ name: 'title 1', genre: 'horror', date: 2014 },
{ name: 'title 2', genre: 'comedy', date: 2015 },
{ name: 'title 3', genre: 'horror', date: 2014 },
{ name: 'title 4', genre: 'comedy', date: 2014 },
{ name: 'title 5', genre: 'horror', date: 2015 }
];
$scope.checkboxDataForFilter = {
range: '',
date: ''
};
}]);
</script>
</head>
<body>
<div ng-app="CheckBoxApp">
<div ng-controller="FilterController">
<label> all:
<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="''"/>
</label>
<label> horro:
<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'horror'"/>
</label>
<label> comedy:
<input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'comedy'"/>
</label>
<br />
<label> all:
<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="''"/>
</label>
<label> 2014:
<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2014"/>
</label>
<label> 2015:
<input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2015"/>
</label>
<table>
<tr ng-repeat="item in allFilms | filter: { date: checkboxDataForFilter.date, genre: checkboxDataForFilter.genre }">
<td>Name: {{ item.name }},</td>
<td>Genre: {{ item.genre }},</td>
<td>Release Date: {{ item.date }}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Средний
Средний