title: how to set the ul li as active in css with angular js
body: <p>i want to set the ul li anchor tag as set active with angularjs.</p>
  
  <p>this is my sidebar code</p>
  
  <pre><code>&lt;ul class="nav nav-list"&gt;
  
      &lt;li class=""&gt;
          &lt;a href="#" class="dropdown-toggle"&gt;
              &lt;i class="menu-icon fa fa-desktop"&gt;&lt;/i&gt;
              &lt;span class="menu-text"&gt;
                  Main Menu
              &lt;/span&gt;
              &lt;b class="arrow fa fa-angle-down"&gt;&lt;/b&gt;
          &lt;/a&gt;
          &lt;b class="arrow"&gt;&lt;/b&gt;
          &lt;ul class="submenu"&gt;
  
              &lt;li class="" id="RoleID"&gt;
                  &lt;a href="Role.html"&gt;
                      &lt;i class="menu-icon fa fa-caret-right"&gt;&lt;/i&gt;
                      Role
                  &lt;/a&gt;
                  &lt;b class="arrow"&gt;&lt;/b&gt;
              &lt;/li&gt;
              &lt;li class="" id="UserID"&gt;
                  &lt;a href="user.html"&gt;
                      &lt;i class="menu-icon fa fa-caret-right"&gt;&lt;/i&gt;
                      User
                  &lt;/a&gt;
                  &lt;b class="arrow"&gt;&lt;/b&gt;
              &lt;/li&gt;
              &lt;li class="" id="countryID"&gt;
                  &lt;a href="country.html"&gt;
                      &lt;i class="menu-icon fa fa-caret-right"&gt;&lt;/i&gt;
                      Country
                  &lt;/a&gt;
                  &lt;b class="arrow"&gt;&lt;/b&gt;
              &lt;/li&gt;
  
  
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am using master page from different header, footer, sidebar.html page.</p>
  
  <p>all the html pages are shown in a "master.hmtl" page by using ng-include command.</p>
  
  <p>here what my doubt is how to set active for "ul"under the  "li" anchor tag automatically when the page load.</p>
  
  <p>this code is used to shown the sidebar in my masterpage.</p>
  
  <pre><code>&lt;div class="main-container ace-save-state" id="main-container"&gt;
          &lt;script type="text/javascript"&gt;
              debugger;
              try { ace.settings.loadState('main-container') } catch (e) { }
          &lt;/script&gt;
          &lt;div ng-include src="'sidebar.html'" class="sidebar responsive ace-save-state"&gt;
              &lt;script type="text/javascript"&gt;
                  try { ace.settings.loadState('sidebar') } catch (e) { }
                  $(function () {
                      // init plugin (with callback)
                      $('#NameID').clearSearch({ callback: function () { console.log("cleared"); } });
                      $('#MUDescriptionID').clearSearch({ callback: function () { console.log("cleared"); } });
                                  });
              &lt;/script&gt;
          &lt;/div&gt;
  
          &lt;!-- /.main-content --&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>before i am not using ng-include method that time i am using this code to active the "li" automatically.</p>
  
  <pre><code>&lt;script&gt; $(function () {
                          $("#sidebar").load("slidebar.html", function () {
                  $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active");
                  $("#ManageUnitID").addClass("active").parents(".nav li").addClass("active open");
              });
          });
  &lt;/script&gt; 
  </code></pre>