How to use ng-if with ng-repeat?

There's probably a better solution, but after reading the replies above, you can try making your own custom filter:

angular.module('yourModule').filter('filterNavItems', function() {
  return function(input) {
    var inputArray = [];

    for(var item in input) {
      inputArray.push(input[item]);
    }

    return inputArray.filter(function(v) { return v.nav; });
  };
});

Then to use it:

<section class="nav">
    <a  ng-repeat="(key, item) in routes | filterNavItems"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

Here's the Plunker: http://plnkr.co/edit/srMbxK?p=preview

Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on you ng-repeat to exclude certain items from your list.

I ran into this problem as well, and found a couple ways to solve it.

The first thing I tried was to combine ng-if and ng-repeat into a custom directive. I'll push that up to github sometime soon, but it's kludgy.

The simpler way to do it is to modify your route.routes collection (or create a placeholder collection)

$scope.filteredRoutes = {};
angular.forEach($scope.route.routes, function(item, key) {
    if (item.nav) { $scope.filteredRoutes[key] = item; }
};

and in your view

...
<a  ng-repeat="(key, item) in filteredRoutes"
...

If you need it to be dynamically updated, just set up watches, etc.

How about this one-liner using $filter:

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});