Active link/tab in AngularUI Router - angularjs

Question

I'm using AngularUI Router and I'm trying to have nested/children links.
All works fine but how do I have selected/active link in Contact tab?
Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl unless I click on the link contact one.
angular
.module ('myApp', ['ui.router'
])
.config (['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/summary');
$stateProvider.
state ('summary', {
url: '/summary',
templateUrl: 'summary.html',
controller: 'summaryCtrl'
}).
state ('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'aboutCtrl'
}).
state ('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.one',{
url: '/contact.contactone',
templateUrl: 'one.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.two',{
url: '/contact.contacttwo',
templateUrl: 'two.html',
controller: 'contacttwoCtrl'
});
}]);
Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

Answer 1

There's a much quicker way to do this. Just use the ui-sref-active="active" attribute instead of ui-sref.
An example:
<ul>
<li ui-sref-active="active">
<a ui-sref="state">State 1</a>
<li>
<ul>
When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows
<ul>
<li ui-sref-active="active so-active super-active">
<a ui-sref="state">State 1</a>
<li>
<ul>

Answer 2

I use the pattern of exposing state on the root scope and using state.current.name in templates. I justify this global exposure because it's an app-level concern. If your navigation directive has isolate scope you'll need to pass it in, but that's no biggie.
In practice it's been very good for us I think.
Looks like this:
javascript
app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
$scope.state = $state;
});
html:
<nav>
<ul>
<li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
</ul>
</nav>

Answer 3

here is the updated plunk - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview
Changes
added a new controller contactCtrl
setup $state.go('contact.contactone'); inside the contactCtrl
updated app.js so that /contact points to contactCtrl

Answer 4

I'm using ng-class like this:
ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"
My "state" name is structured like:
app
app.homepage
app.profile
app.profile.user
.etc
For example, in my homepage, it's button became like this:
<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>
So just define scope of $state like #Simple As Could Be said at root of the app controllers, and you can use ng-class to whatever your app's state and how deep your app's state nested.

Answer 5

See my plunk http://embed.plnkr.co/bRfl1S9KXQuvL0Bvt9jD/preview.
Also try updating the version of ui-router to 0.2.12.
Only client tab as really been implemented.