AngularJS:

by Alberto Naperi Jr.

HTML

<div ng-app="myApp">
    <ul ng-controller="YourCtrl">
       <li ng-click="previousSkills()" ng-disabled="currentPage = 0"><<</li>
       <li ng-repeat="skill in skills | offset: currentPage * 4 | limitTo: 4">
           {{skill.SkillName}}
        </li>
        <li ng-click="nextSkills()" ng-disabled="currentPage = (skills.length / 4)">>></li>
    </ul>
</div>

CSS

li {
    display: inline-block;
    padding: 10px;
    background: #000;
    color: orange;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

li:first-child,
li:last-child {
    cursor: pointer;
}

JavaScript

'use strict';

var app = angular.module('myApp', []);

app.controller('YourCtrl', ['$scope', function ($scope) {
    
    $scope.currentPage = 0;

    $scope.skills = [
        {SkillName:'C#'},
        {SkillName:'MVC'},
        {SkillName:'Web Forms'},
        {SkillName:'Web API'},
        {SkillName:'SignalR'},
        {SkillName:'EF'},
        {SkillName:'Linq'},
        {SkillName:'Github'},
        {SkillName:'Html'},
        {SkillName:'CSS'},
        {SkillName:'SQL'},
        {SkillName:'Angular'},
        {SkillName:'Azure'}
      ];
    
    $scope.previousSkills = function() {
       $scope.currentPage = $scope.currentPage - 1;
    };
    
    $scope.nextSkills = function() {
       $scope.currentPage = $scope.currentPage + 1;
    };
}]);

app.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start, 10);
    return input.slice(start);
  };
});