How do I implement the bootstrap active class for navigation bar's sub tabs using AngularJS or Jquery

There is a side navigation that is created using bootstrap.here is the html ..

              <li>
                <a href="12Modifires.php"> Access Modifiers </a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="12Modifires.php">private</a>
                    </li>
                    <li>
                        <a href="12Modifires.php#default">Default</a>
                    </li>
                    <li>
                        <a href="12Modifires.php#protected">protected</a>
                    </li>
                    <li>
                        <a href="12Modifires.php#public">public</a>
                    </li>
                    <!-- /.nav-third-level -->
                </ul>
                <!-- /.nav-second-level -->
            </li>           
            <li>
                <a href="13.polymorphism.php">  polymorphism</a>
                <!-- /.nav-second-level --->
            </li>

when click the navigation tabs, I want active navigation bar tabs Separately. however there are two pages in above example. (12Modifires.php and 13.polymorphism.php ) private,Default,protected,protected contain in 12Modifires.php page as div tags. 13.polymorphism.php is a another page.how do I do it using angular js..? I am a beginer for angularJs...!

this is the navigation image

There are lot of examples for different pages that linked different pages. But unabe to find that.

This methode in insufficient for me.. could you help me..?