JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">

  Only passes students?
  <input type="checkbox" ng-init="passes = true" ng-model="passes">
  <br/> Not passed student students?
  <input type="checkbox" checked ng-init="fails = true" ng-model="fails">
  <br/>
  <br/>
  <table cellspacing="0" cellpadding="0">
    <tbody>
      <tr class="days">
        <th>Student name</th>
        <th>#FAILS</th>
        <th>PASSED?</th>
      </tr>
      <tr ng-repeat="student in studentData | filter: studentFilter">
        <td>{{ student.name }}</td>
        <td>{{ student.fails }}</td>
        <td>
          {{ (student.fails <=0 ) ? 'YES' : 'NO' }} </td>
      </tr>
    </tbody>
  </table>


</div>

JavaScript

var app = angular.module('myApp', [])

app.controller('myCtrl', function($scope) {

  $scope.studentFilter = function (item) { 
  		if($scope.passes && $scope.fails) return item;
      if($scope.passes && item.fails <= 0) return item;
      if($scope.fails && item.fails > 0) return item;
  };
  

  $scope.studentData = [{
    id: 1,
    name: 'Nabil',
    fails: 1
  }, {
    id: 2,
    name: 'Daan',
    fails: 0
  }, {
    id: 3,
    name: 'Walter',
    fails: 2
  }, {
    id: 4,
    name: 'Magaly',
    fails: 0
  }, {
    id: 5,
    name: 'Steven',
    fails: 2
  }, {
    id: 6,
    name: 'Bill',
    fails: 0
  }];
});