title: Implementing a "Load More" button to load more elements when its clicked
body: <p>I want my li elements to be hidden and when my state loads I want to display only the first two elements and when I click on a button o show the next two elements and so on.</p>
  
  <p>This is how it should work : </p>
  
  <p><a href="http://jsfiddle.net/zuyvgwx3/2/" rel="nofollow">http://jsfiddle.net/zuyvgwx3/2/</a></p>
  
  <p>In my angular application I display my li elements as following :</p>
  
  <pre><code>  &lt;ul id="myList"&gt;
         &lt;li ng-repeat="offre in offres |orderBy:'-dateCreation'|filter:{etat:'true'}"&gt;
           &lt;div class="box"&gt;
              &lt;!-- HTML Code --&gt;
           &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>I have li elements set to <code>display:none;</code> and a javascript code that shows the first two elements as following :</p>
  
  <pre><code>&lt;script&gt;
  
      size_li = $("#myList li").size();
      x=2;
      $('#myList li:lt('+x+')').show();
      $('#loadMore').click(function () {
        x= x+2;
        $('#myList li:lt('+x+')').show();
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is when my state loads all the li elements are shown and not only the first two elements, as you can see in the fiddle I attached it works but it doesn't work when I use it with ng-repeat.</p>
  
  <p>How can I solve this?</p>