var app = angular.module('plunker', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
$scope.back = function() {
if ($scope.tabIndex > 0) {
$scope.tabIndex--;
}
};
$scope.next = function() {
if ($scope.tabIndex < 2) {
$scope.tabIndex++;
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<link data-require="angular-material@1.1.0" data-semver="1.1.0" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<script data-require="angular.js@1.5.x" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="//code.angularjs.org/1.5.5/angular-animate.js"></script>
<script data-require="angular-aria@1.5.5" data-semver="1.5.5" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script data-require="angular-messages@1.5.5" data-semver="1.5.5" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script data-require="angular-material@1.1.0" data-semver="1.1.0" src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="md-padding" ng-cloak>
<md-tabs md-no-pagination="false" md-selected="tabIndex">
<md-tab label="tab1">
tab1 content
</md-tab>
<md-tab label="tab2">
tab 2 content
</md-tab>
<md-tab label="tab3">
tab 3 content
</md-tab>
</md-tabs>
<md-button ng-click="back()" class="md-raised">
Previous
</md-button>
<md-button ng-click="next()" class="md-raised">
Next
</md-button>
</div>
</body>
</html>
/* Put your css in here */
.md-tab {display: none;}