Ng-repeat inside ng-repeat

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('MyCtrl', function ($scope) {
$scope.menuItems = [{ name: 'dish1', category: 'soup' },
{ name: 'dish2', category: 'beef' }];
$scope.categories = ['beef', 'soup']
})
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<ul ng-repeat="cate in categories">
<li>{{cate}}</li>
<li ng-repeat="menuItem in menuItems | filter:{category: cate}">{{menuItem.name}}</li>
</ul>
</div>
</body>
</html>