Animated load more button with angular ng-repeat

Question

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? Here is what I did.

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"
]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <ul ng-init="limit=5">
      <li ng-repeat="country in countries |limitTo:limit track by $index">{{country}}</li>
      <li>
        <button ng-click="$parent.limit=countries.length" ng-if="limit==5">
          More
        </button>
        <button ng-click="$parent.limit=5" ng-if="limit!=5">
          Less
        </button>
      </li>
    </ul>
  </div>
</div>

Answer 1

Here is a working jsBin

The main problem is, you need to include ngAnimate as dependency in your main module