I am using ng-click and ng-show for pagination - angularjs

Question

I am using ng-click and ng-show for pagination. In this case it keeps on creating new pages in both direction when ever buttons are clicked i.e it keeps on creating blank pages. It should stop at first and last page respectively. Here I have created three sub-pages for pagination the buttons should play only for this three sub pages.
Looking forward for any help.
thank you.
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>
<a href ng-click="setTab(tab+1)" class="btn btn-primary btn-lg" role="button">Next</a>
</li>
<li>
<a href ng-click="setTab(tab-1)" class="btn btn-primary btn-lg" role="button">Back</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>Home page</h1>
<p>Welcome to the website!</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<div ng-show="isSet(2)">
<h1>Profile page</h1>
<p>Profile information</p>
</div>
<div ng-show="isSet(3)">
<h1>Messages</h1>
<p> Some messages </p>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab) {
$scope.tab = newTab;
};
$scope.isSet = function(tabNum) {
return $scope.tab === tabNum;
};
}]);
</script>
I have created a codepen