Material design md-tabs with angularjs

Question

I have a question regarding material design md-tabs control. I am using md-tabs with Angularjs on one of the pages and it works fine. I also have a md-button on that page an

Answer 1

You can use the md-selected attribute on md-tabs directive. md-tabs uses md-selected attribute to decide which tab is selected. So you can simply update $scope.selectedTab on click of your md-button to select the desired tab.

Have a look at this code snippet:

angular.module("material", ["ngMaterial", "ngAnimate"])

.controller("tabCtrl", ["$scope", function($scope) {
    $scope.selectedTab = 0;
    
    $scope.changeTab = function() {
        if ($scope.selectedTab === 2) {
            $scope.selectedTab = 0;
        }
        else {
            $scope.selectedTab++;
        }
        
    }
}]);

.tab-content {
    margin: 20px 0 0 0;
    text-align:center;
}

.tab-container {
    height:120px;
}

.tab-change-row {
    text-align:center;
}

.tab-change-btn {
    display: inline-block
}

    
    

    

    

        

            
                
                    
Tab One content
                
                
                    
Tab Two content
                
                
                    
Tab Three content
                
                  
        
       
        
        

            Change Tab