ng-repeat with ng-if causing Object.noSuchMethod exception

Question

I'm trying to write an ng-repeat, where some of the elements are there and some aren't, like this:

  <ul>
    <li ng-repeat="menuItem in menuItems" ng-if="locationState == menuItem.displayWhen" 
      ng-class="{'menu-item-divided': isCurrentPage(menuItem.routeName), 'pure-menu-selected': isCurrentPage(menuItem.routeName)}">
      <a href="#{{menuItem.routeName}}" 
      ng-click="menuItem.whenClicked()">{{menuItem.pageName}}</a>
    </li>
  </ul>

But when I do it like that, it tries to access a menuItem getter in my component. If I put the ng-if on the a element, though, it works fine. Shouldn't menuItem be in scope for directives on the element I am using ng-repeat on?