showing next tab bootstrap angular js

Question

i have a problem,if i click report tab or another tab. it will be back to login page. i want that if i click another tab, it's not go back to login page. is there any solution? this is my plunk

https://plnkr.co/edit/snDNgPEToZsIbXaHSWib?p=preview

here is my js file, thank you and sorry for bad english

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

app.filter('coba', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});
app.filter('report', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});

app.config(['$routeProvider',
  function($routeProvider) { 
        $routeProvider.when('/', {
          templateUrl: 'login.html',
          controller: 'logincont'
        })
        .when('/main', {
          templateUrl: 'mainmenu2.html'
        })
        .otherwise({redirectTo: '/'});
}]);

app.run(function($rootScope,$route,$location){
       var unauthRoutes= [];
       console.log(unauthRoutes);
    angular.forEach($route.routes, function(route, path) {
        // push route onto unauthRoutes if it has a truthy allowUnauth value
        route.allowUnauth && (unauthRoutes.push(path));
    });

    $rootScope.$on('$routeChangeStart', function(event, nextLoc, currentLoc) 
    {
        var atuhRoute= (-1 === unauthRoutes.indexOf($location.path()));

        if(atuhRoute && !$rootScope.loggedIn) {
            $location.path('/');
        }
    });
})

app.controller("logincont", ['$scope','$http','$window','$location','$rootScope',function($scope,$http,$window,$location,$rootScope){
$scope.login = function () {
      if ($scope.userid == 'rock' && $scope.pass == 'rock')
        {
          alert('Login Incorrect'); 
        }
        else
        {
          $rootScope.loggedIn = true;
          $location.path('/main');
          console.log('success');
        }
      };  

      }]);

app.controller("moncont", ['$scope','$http','$filter','$window','$location',function($scope,$http,$filter,$window,$location){
  $scope.logout = function(){
    $location.path('/logout');
  }
      }]);

app.controller("repcont", ['$scope','$http',function($scope,$http){
  $scope.logout = function(){
    $location.path('/logout');
      };

      }]);

Answer 1

First Thing is, in your code, in the routes file, you donot have all the routse mentioned in your pluker

There is one route for main

.when('/main', {
          templateUrl: 'mainmenu2.html'
  })

Change, #main to #!main to make it work.

<ul class="nav nav-tabs navbar-ke-kanan" >
    <li><a data-toggle="tab" href="#!login">Log Out</a></li>
    <li><a data-toggle="tab" href="#!main">Menu 2</a></li>
    <li><a data-toggle="tab" href="#!main">Report</a></li>
    <li class="active"><a data-toggle="tab" href="#!main">Monitoring</a></li>
  </ul>

Here is AN UPDATED PLUNKER