javascript - AngularJS: Set element to class active by default -

i've created custom tabbed element using following code:

<div class="row step">     <div class="col-md-4 arrow active" ui-sref-active="active">         <a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }">             <span class="number">1</span>             <span class="h5">key elements</span>         </a>     </div>     <div class="col-md-4 arrow" ui-sref-active="active">         <a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }">             <span class="number">2</span>             <span class="h5">questions</span>         </a>     </div>     <div class="col-md-4 arrow" ui-sref-active="active">         <a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }">             <span class="number">3</span>             <span class="h5">publish</span>         </a>     </div> </div> 

as can see i'm using ui-sref-active="active" add class of active element when clicked. issue getting first element display class of active when page first loaded happens when item clicked. i've tried manually adding active first element seems ignored.

the problem first route dashboard.create.key_elements not current route, ui-router disables "active".

solution:

1. add class in css e.g. "newclassname" have same behavior of "active" class

2. add ng-class first element conditioned variable in $scope , ng-click on other elements disable it

in js:

$scope.firstactive = true; $scope.changefirst = function() {       $scope.firstactive = false; }; 

edit:

better yet, instead of dabbling ng-click, can inject variable when define routes. e.g. snippet of own code

.state('ordini', {             url: '/ordini/:pdv',             templateurl: 'ordini/ordini.html',             controller: 'ordinicontroller',             resolve : {                 cartvalue: ['$rootscope', '$stateparams', 'cartservice', function($rootscope, $stateparams, cartservice){                     return cartservice.getcartvalue($rootscope.user.machcode, $stateparams.pdv);                 }]             } 

see documentation