title: Toggle visibility of a ng-include depending on route
body: <p>I have the following configuration:</p>
  
  <pre><code>$routeProvider
  .when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
  .when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });
  </code></pre>
  
  <p>and somewhere in my root index.html there is a:</p>
  
  <pre><code>&lt;a href="#/cars"&gt;Cars&lt;/a&gt;
  &lt;a href="#/bikes"&gt;Bikes&lt;/a&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, I want both views <strong>loaded and generated in the DOM at the same time</strong>, and show one of them depending on the route/URL.</p>
  
  <p>Something like the following (not actual working code, just to give you an idea).</p>
  
  <p>app.js:</p>
  
  <pre><code>$routeProvider
  .when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
  .when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });
  </code></pre>
  
  <p>root index.html:</p>
  
  <pre><code>&lt;a href="#/cars"&gt;Cars&lt;/a&gt;
  &lt;a href="#/bikes"&gt;Bikes&lt;/a&gt;
  &lt;div ng-include="'app/cars/index.html'" ng-show="carsVisible"&gt;&lt;/div&gt;
  &lt;div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong>: I know that ng-view kind of does this, but the difference, if subtle, exists. I want the html of each view to be generated once and stay in the DOM at all times. </p>