How to add ui-sref to multiple state names?

Question

I need to add two state names to one button. These are the two state names. 'home.contact' and 'home.contactList'. Is there way to do this?

<md-grid-tile md-rowspan="1" md-colspan="1" ui-sref="home.contact" class="md-clickable" md-ink-ripple ui-sref-active="active">
    <div layout="column" layout-align="center center" layout-fill>
      <ng-md-icon icon="group" class="fill-color-white no-margin"></ng-md-icon>
      <span class="font-size-10">People</span>
    </div>
  </md-grid-tile>

In this code button is linked to 'home.contact'.I need to highlight this button in the state is 'home.contactList' too.

Here is routing part.

$stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('home.contact', {
    url: '/contacts',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contacts-list.html',
        controller: 'ContactsController',
        controllerAs: 'contacts'
      }
    }
  })
  .state('home.contactList', {
    url: '/contact',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contact-list.html',
        controller: 'ContactListController',
        controllerAs: 'contact'
      }
    },
    params: {
      contact: null
    }
  })

Answer 1

Make 'home.contact' parent of 'home.contactList'(change home.contactList to home.contact.list) like as -

    $stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('home.contact', {
    url: '/contacts',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contacts-list.html',
        controller: 'ContactsController',
        controllerAs: 'contacts'
      }
    }
  })
  .state('home.contact.list', { // changed route name for hierarchy
    url: '/contact',
    views: {
      'main@home': { // added parent name with view name
        templateUrl: 'app/components/contacts/contact-list.html',
        controller: 'ContactListController',
        controllerAs: 'contact'
      }
    },
    params: {
      contact: null
    }
  })

Now it will also automatically show active when child state is active. For more information - http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Answer 2

State 1 - home.contact

State 2 - home.contactList

Controller - in your controller initialize stateName in a scope variable.

 .controller('Controller',function ($scope, $state){
        $scope.stateName = $state.current.name;
  });

View - in your view to display button name dynamically write this

 <md-grid-tile md-rowspan="1" md-colspan="1" ui-sref="{{stateName}}" class="md-clickable" md-ink-ripple ui-sref-active="active">
<div layout="column" layout-align="center center" layout-fill>
  <ng-md-icon icon="group" class="fill-color-white no-margin"></ng-md-icon>
  <span class="font-size-10">People</span>
</div>