Angular Pagination Table

HTML

<div ng-controller="MyCtrl">
    <input type="search" class="page-search" ng-model="vm.paginator.search" placeholder="Pesquisar..." ng-change="vm.paginator.load()">
    <input type="number" class="page-items" ng-model="vm.paginator.items" ng-change="vm.paginator.load()">
    <input type="number" class="page-current" ng-model="vm.paginator.current" ng-change="vm.paginator.load()"> / {{ vm.paginator.total }}
    <table>
        <tr>
            <th>Name</th>
            <th>Telephone</th>
        </tr>

    <tr ng-repeat="contact in vm.contacts">
        <td>{{contact.name}}</td>
        <td>{{contact.telephone}}</td>
    </tr>

    </table>
</div>

CSS

body {
    background: #fff;
}
input {
    margin: 5px 0;
    padding: 4px 8px;
}

input.page-items {
    width: 60px;
}

input.page-current {
    width: 60px;
}

table {
    width: 100%;
}
table, th, td, input {
    border: 1px solid #ddd;
    border-collapse: collapse;
}
th, td {
    padding: 4px;
}
td {
    font-weight: normal;
}

JavaScript

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

//myApp.directive('myDirective', function() {});

myApp.service('MyService', function($http) {
	this.load = function (search, items, current, callback) {
        callback.call(this, [
        {"name": "Batman", "telephone": "+1 32 940-0001"},
        {"name": "Superman", "telephone": "+1 32 940-3001"}
        ]);
    }
});

myApp.controller('MyCtrl', function ($scope, MyService) {

    var vm = {};
    
    vm.paginator = {
    	search: '',
    	items: 20,
        current: 0,
        total: 1,
        load: function() {
        	MyService.load(vm.paginator.search, vm.paginator.items, vm.paginator.current, function(data) {
            	vm.contacts = data;
            });
        }
    };
    
    vm.contacts = [ {"name": "Batman", "telephone": "+1 32 940-0001"},
        {"name": "Superman", "telephone": "+1 32 940-3001"}];
    
    $scope.vm = vm;
});