Load More Toggled to Load Less

loadMore.js

// set the default amount of items being displayed
var defaultvalue = 3;
$scope.limit= defaultvalue;
$scope.ismore = false;
 
// loadMore function
$scope.loadMore = function() {
  $scope.limit = $scope.items.length;
  $scope.ismore = true;
}

$scope.loadLess = function() {
 $scope.limit= defaultvalue;
  $scope.ismore = false;
}

template.html

<ul class="lists">
  <li ng-repeat="item in items | limitTo:limit">
    <span>{{item.name}}</span>
  </li>
  <li>
    <button ng-click='loadMore()' ng-class="{ 'hidediv': ismore }">More</button>
    <button ng-click='loadLess()' ng-class="{ 'hidediv': !ismore }">Less</button>
   
  </li>
</ul>