title: How to use ng-if with ng-repeat?
body: <p>I have a simple nav object setup that lists the nav items (and whether they should appear in the primary nav or not). It seems though when I try to mix ng-if with ng-repeat, things fall apart, but when I mix ng-show with ng-repeat it works fine (but I end up with a bunch of hidden elements that I don't want appended to the DOM).  </p>
  
  <pre><code>   &lt;section class="nav"&gt;
          &lt;a  ng-repeat="(key, item) in route.routes"
              ng-href="{{key}}"
              ng-show="item.nav"
          &gt;
                  {{item.label}}
          &lt;/a&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>But the following doesn't work (note the <code>ng-show</code> is now <code>ng-if</code>):</p>
  
  <pre><code>    &lt;section class="nav"&gt;
      &lt;a  ng-repeat="(key, item) in route.routes"
          ng-href="{{key}}"
          ng-if="item.nav"
      &gt;
              {{item.label}}
      &lt;/a&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The routes object looks like </p>
  
  <pre><code>routes: {
      '/home': { label: 'Home', nav: true },
      '/contact': { label: 'Contact', nav: false},
     // etc
  }
  </code></pre>
  
  <p>I receive the following error when trying to use <code>ng-if</code>:</p>
  
  <blockquote>
    <p>Error: Multiple directives [ngIf, ngRepeat] asking for transclusion on: </p>
  </blockquote>
  
  <p>I guess it's trying to tell me that I can't state it's declaration for existing twice. I could use <code>ng-if</code> on an inner element, but I think I would still end up with a bunch of empty outer <code>a</code> tags. </p>