Анимированная кнопка "Загрузить еще" с угловым повторением

Question

Я использовал ng-repeat для отображения некоторых данных из массива, но данные слишком велики, поэтому я использовал лимит с помощью ng-repeat и кнопки more для загрузки большего количества элементов из массива. Теперь я хочу использовать анимацию, которая даст эффект расширения. Как я могу сделать с Angular и NG-Animate? Вот что я сделал.

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

Вот рабочий jsBin

Основная проблема заключается в том, что вам нужно включить ngAnimate в качестве зависимости в ваш основной модуль