How to Set navbar active class with Bootstrap and AngularJS ?

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.

Below example implements the above approach:

Example: This example explain how to set bootstrap navbar active class with AngularJS using ng-controller.





<!DOCTYPE html>
<html lang="en" >
    <meta charset="UTF-8">
        Bootstrap Navbar Change
        Active Class Link
    <link rel="stylesheet" href=
    <link rel='stylesheet' href=
    <script src=
    <script src=
        body {
            margin: 20px;
        #topheader .navbar-nav li > a {
            text-transform: capitalize;
            color: #333;
            -webkit-transition: background-color .2s, color .2s;
            transition: background-color .2s, color .2s;
        #topheader .navbar-nav li > a:hover, 
        #topheader .navbar-nav li > a:focus {
            background-color: #005596;
            color: #fff;
        #topheader .navbar-nav > a {
            background-color: #3990E0;
            color: white;
    <div id="topheader">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"
                    style="color: green;">GeeksforGeeks</a>
                <div class="collapse navbar-collapse"
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">
                        <li><a href="#page1">HTML</a></li>
                        <li><a href="#page2">CSS</a></li>
                        <li><a href="#page3">JavaScript</a></li>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Fron-End</a></li>
        $( '#topheader .navbar-nav a' ).on('click', 
                    function () {
            $( '#topheader .navbar-nav' ).find( '' )
            .removeClass( 'active' );
            $( this ).parent( 'li' ).addClass( 'active' );



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.