Implementing a "Load More" button to load more elements when its clicked
<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>