angularjs - Active class breaking on state change -

so here's thing. have ng-class on header item projects:

ng-class="{ active: $state.includes('project')}" 

my main view projects called home, projects under abstract project state.

home:

.state('home', {   url: '/',   templateurl: '/views/project-list-view.html',   controller: 'projectlistctrl' }) 

project:

.state('project', {   template: '<ui-view/>',   url: '/project',   abstract: true,   controller: function ($scope) {     //   } }) .state('project.view', {   url: '/:slug',   params: {     id: null,     slug: null   },   templateurl: '/views/project-view.html',   controller: 'projectviewctrl' }) 

so problem when navigate home state (project list) project view page, menu item loses it's active class. when refresh page after navigating, works though. why not working , how overcome this?

edit: had ui-sref-active in title, not relevant part that's breaking.

edit2: http://plnkr.co/edit/kwlbofgbz0dyaknavsum?p=preview

doing way, can create run block app , everytime change route, see if includes the project state:

app.run(['$rootscope', '$state', function($rootscope, $state) {    $rootscope.$on('$statechangesuccess', function (event, tostate, toparams, fromstate) {      $rootscope.projectstate = $state.includes('project') || $state.includes('home');    });  }]); 

then, in index file:

<!-- remove ui-sref-active --> <li ui-sref="home" ng-class="projectstate ? 'active' : '' ">link somewhere</li> 

and here modified plunker