How to go to the next route angularjs?

Question

Angular

I have an html file that looks like this

<div class="partners-tabs" ng-controller="MainController" >
                <ul class="tabs-navigation">
                    <li class="tab-item" ng-class="{'active-tab': routeInformation.current.activetab==='all'}">
                        <a class="tab-link" href="#All">All</a>
                    </li>
                    <li class="tab-item" ng-class="{'active-tab': routeInformation.current.activetab==='hardware'}">
                        <a class="tab-link" href="#hardware">Hardware</a>
                    </li>
                   .....
                    <span class="tab-controls">
                        <a href="#slide">CLICK</a>
                    </span>
                </ul>
            </div>

all paths on button elements work
i want to add a button

<span class="tab-controls">
                        <a href="#slide">CLICK</a>
                    </span>

so that by clicking on it we go to the next path of the
angular code

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

module.controller('MainController', ['$rootScope', '$scope', '$route', function($rootScope, $scope, $route) {
    $scope.routeInformation = $route;
}]);

module.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider ,$scope) {

    $routeProvider

        .when('/all', {
            templateUrl: './templates/all.html',
            activetab: 'all'
        })

        .when('/hardware', {
            templateUrl: './templates/hardware.html',
            activetab: 'hardware'
        })
......
        .otherwise({
            redirectTo: '/all'
        });

}]);

i.e. we click on the button, the next tab opens, click again - next
thanks!

Answer 1

Take a look at angular-ui-router , where things like this are easy to do with nested states.