How to set menu active in master page using angular js

Question

I want to set menu active in master page from different page.

i am using sidebar from one page, header from one page and footer from one page.

all the three pages are combined.

I am using 10 UI's in angular js. when i moved to different UI i want to set active only the selected UI.

before I am using this jquery

 $("#sidebar").load("slidebar.html", function () {
                $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active");
                $("#ManageUserID").addClass("active").parents(".nav li").addClass("active open");
            });

this is working nicely.

Now i am going to hide the UI based on user view and edit permission(UI Hide) so now i am using ng-include to Include the UI's.

after that i am trying to set menu active like this

controller=SlideController1

MainMenuActive="active open"
ActiveRole="active"

controller=SlideController2

MainMenuActive="active open"
ActiveUser="active"

controller=SlideController3

MainMenuActive="active open"
ActiveFacility="active"





 <li ng-controller="SlideController1 || SlideController2 || SlideController3" class={{MainMenuActive}} >
            <a href="#" class="dropdown-toggle">
                <i class="menu-icon fa fa-desktop"></i>
                <span class="menu-text">
                    Security
                </span>
                <b class="arrow fa fa-angle-down"></b>
            </a>
            <b class="arrow"></b>
            <ul class="submenu">
                <li  class={{ActiveRole}} ng-model="ManageRole"  id="ManageRoleID" >
                    <a href="ManageRole.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        Manage Role
                    </a>
                    <b class="arrow"></b>
                </li>
                <li  class={{ActiveUser} id="ManageUserID">
                    <a href="manageuser.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        Manage User
                    </a>
                    <b class="arrow"></b>
                </li>
                <li  class={{ActiveFacility}} id="ManageFacilityID">
                    <a href="ManageFacility.html">
                        <i class="menu-icon fa fa-caret-right"></i>
                        Manage Facility
                    </a>
                    <b class="arrow"></b>
                </li>
            </ul>
        </li>

here i am not able to add three controller.

now i want to set menu active by selected UI how to do in angular JS.

Answer 1

instead of the old script

    <script>
 $(function () {

        $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active");
        $("#ManageUnitID").addClass("active").parents(".nav li").addClass("active open");

});
    </script>