Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    
    <button class="btn" ng-click='filterCriteria={}'>All</button>
    <button class="btn" ng-click='filterCriteria.read=true'>Read</button>
    <button class="btn" ng-click='filterCriteria.read=false'>Not read</button>
    <hr/>
  <table class="table table-bordered">
      <thead>
          <tr>
              <td><strong>Title</strong></td>
              <td><strong>Content</strong></td>    
              <td><strong>Read</strong></td>    
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat='message in messages |filter:filterCriteria'>
              <td>{{message.title}}</td>
              <td>{{message.content}}</td>    
              <td>{{message.read}}</td>    
          </tr>
      </tbody>            
  </table>
</div>

JavaScript

function MyCtrl($scope) {
    
    $scope.filterCriteria ={};
    
    $scope.messages = [{
        title: 'Foo',
        content: 'Foo content',
        read: false
        },
    
    {
        title: 'Bar',
        content: 'Bar content',
        read: true
        },
            ];
}