Extending built-in directives

HTML

<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app='myApp' ng-controller="controller">
  Works:<br/>
  ng-repeat="obj in objs | filter:{category:1}"<br/>
  <span ng-repeat="obj in objs | filter:{category:1}">{{obj.name}}<br/></span>
  <br/>
  Doesn't work:<br/>
  ng-repeat="obj in objs | filter:{category:null}"<br/>
  <span ng-repeat="obj in objs | filter:{category:null}">{{obj.name}}<br/></span>
</div>

JavaScript

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

myApp.controller('controller', ['$scope', function ($scope) {
  $scope.objs = [{name:'obj1', category:null}, {name:'obj2', category:null}, {name:'obj3', category:null}, {name:'obj4', category:1}, {name:'obj5', category:1}, {name:'obj6', category:1}, {name:'obj7', category:2}, {name:'obj8', category:2}, {name:'obj9', category:2}];
}]);