title: Animated load more button with angular ng-repeat
body: <p>I used ng-repeat to display some data from array, But the data is too big so I used limit with ng-repeat and more button to load more items from array. Now I want to use animation which will give effect of expand. How can I do with angular and ng-animate? <a href="http://jsfiddle.net/dlinx/7rarmpp7/4/" rel="nofollow">Here</a> is what I did.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp', []);
  myApp.controller('myController', function($scope) {
    $scope.countries = [
    "ut",
    "duis",
    "enim",
    "deserunt",
    "ea",
    "in",
    "in",
    "deserunt",
    "ad",
    "tempor",
    "mollit",
    "nisi",
    "dolor",
    "exercitation",
    "ex",
    "excepteur",
    "nisi",
    "irure",
    "nostrud",
    "aliqua",
    "voluptate",
    "nisi",
    "anim",
    "dolore",
    "magna",
    "Lorem",
    "commodo",
    "exercitation",
    "consequat",
    "cillum",
    "elit",
    "elit",
    "pariatur",
    "sit",
    "fugiat",
    "anim",
    "aliquip",
    "consectetur",
    "excepteur",
    "in",
    "commodo",
    "do",
    "mollit",
    "exercitation",
    "duis",
    "duis",
    "sit",
    "aute",
    "sint",
    "sunt",
    "exercitation",
    "occaecat",
    "culpa",
    "sit",
    "commodo",
    "esse",
    "incididunt"
  ]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp"&gt;
    &lt;div ng-controller="myController"&gt;
      &lt;ul ng-init="limit=5"&gt;
        &lt;li ng-repeat="country in countries |limitTo:limit track by $index"&gt;{{country}}&lt;/li&gt;
        &lt;li&gt;
          &lt;button ng-click="$parent.limit=countries.length" ng-if="limit==5"&gt;
            More
          &lt;/button&gt;
          &lt;button ng-click="$parent.limit=5" ng-if="limit!=5"&gt;
            Less
          &lt;/button&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>