title: How to show div when link is clicked with ng-show angular js
body: <p>first off, i have links from a json and display it using ng-repeat and i want to know if its best practise to load all object property (in a div) corresponding to its link and hide it so when you click a link, the corresponding div shows. </p>
  
  <p>I'm thinking about the worst case scenario, were we have about a 100 links and the load all corresponding divs and hide it o_O</p>
  
  <p>So this is my html:</p>
  
  <pre><code>&lt;a href=""&gt;
    &lt;div ng-model="showModal" class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}"&gt;
                          &lt;span id="contentItemHeader"&gt;{{ meal.title }}&lt;/span&gt;
                          &lt;span id="contentItemLevel"&gt;{{ meal.level }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>This is the div (modal) i want to display in full screen:</p>
  
  <pre><code>&lt;div ng-show="showModal" ng-repeat='meal in recipes'&gt;
  &lt;span&gt;{{ meal.url }}&lt;/span&gt;
  &lt;span&gt;{{ meal.method }}&lt;/span&gt;
  &lt;span&gt;{{ meal.ingredients }}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Use case is:</p>
  
  <p>-all links loads</p>
  
  <p>-click a link</p>
  
  <p>-corresponding div shows</p>
  
  <p>Thats it ! just like when you see a list of videos on youtube, you click one, then the video page opens but as a modal (same page)</p>
  
  <p>Thanks alot,</p>
  
  <p>regards</p>