AngularJs ui set the home page active

Question

I am working of AngularJs v 1 app with ui routing.

My question simply how to set the home page active without clicking the ui-sref link.

I tried with ng-class="active" but it doesn't achieve the task.

<script>
angular.module("myApp",['ui.router'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
   $stateProvider
      .state("home",{
         url:"home",
         views:{
         'main':{templateUrl:"home.html"}
      }
});
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/home");
</script>
<div class="container" style="margin-top: 60px">
<div ui-view="main"> </div>
</div>

Home page

<div class="row" style=" margin-top:100px; " ng-app="app" ng-class="active">
<h1>Home</h1>
</div>  

Answer 1

What you are looking for is ui-sref-active

From the doc

A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.

It will add the active for you if you're currently on the right state.

Markup should look something along the line of

<div class="some-navigation-class">
    <a ui-sref="home" ui-sref-active="active">Home</a>
    <!-- more nav goes here -->
</div>