title: ng-click increase limit only works once and then stops working after adding one row to ng-repeat
body: <p>I'm working on a ng-repeat increase limitTo button. My problem is it works once in adding a row to my feed, but then seems to revert back to the original limitTo and then stops working.</p>
  
  <p>The app.js file</p>
  
  <pre><code>angular.module('app').controller('MyController', function($scope, $http) {
  
  $http.get('externaljsonfeed').success(function(data) {
      // $scope.limit = 6;
      // $scope.increasePosts = function() {
      //  $scope.limit += 3 ;
      // }
      $scope.posts = data;
  
      var limitStep = 5;
      $scope.limit = limitStep;
      $scope.incrementLimit = function(add) {
          $scope.limit += limitStep;
      };
      $scope.decrementLimit = function(remove) {
          $scope.limit -= limitStep;
      };
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>The html to output the feed</p>
  
  <pre><code>&lt;html lang="en" ng-app="app"&gt;  
  &lt;body ng-controller="MyController"&gt;     
      &lt;div class="row" flex-row&gt;
          &lt;div class="small-up-1 medium-up-2 large-up-3"&gt;
              &lt;div class="column" ng-repeat="posts in posts | filter:search | limitTo: limit"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="image"&gt;
                          &lt;a href="{{ posts.url }}" target="_blank"&gt;&lt;img
                      src="{{ posts.image_thumbnail }}" alt="{{ posts.title }}" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And then the button to increase the limitTo</p>
  
  <pre><code>&lt;button class="load-more-btn" ng-click="incrementLimit(add)"&gt;Discover More&lt;/button&gt;
  </code></pre>
  
  <p>Edit: </p>
  
  <p>It is now working correctly. </p>