AngularJs active navigation item Issue - angularjs

Question

I have in view :
<ul class="nav nav-pills" ng-controller="MenuItemCtrl as vm">
<li ng-repeat="item in names" class="col-lg-2 col-md-2 col-sm-12 col-xs-12" ng-click="select($index)" ng-class="{active: $index == selected}">
<a ng-show="{{item.up===true}}" href="#{{item.link}}">{{item.name}}</a>
</li>
</ul>
and controller like this:
$scope.names = [{
name: "Main",
slug: "main",
active: true,
up:true,
inFooter:false,
link: "/"
}, {
name: "Pets",
slug: "pets",
active: false,
up:true,
link: "/pets"
}, {
name: "LDAdoption",
slug: "ldAdoption",
active: false,
inFooter:false,
up:true,
link: "/ldAdoption"
},{
name: "Impressum",
slug: "impressum",
active: false,
up:false,
inFooter:true,
link: "/impressum"
}, {
name: "Be a volunteer",
slug: "volunteer",
active: false,
inFooter:true,
up:false,
link: "/volunteer"
}, {
name: "Contact",
slug: "contact",
active: false,
up:true,
inFooter:true,
link: "/contact"
}];
$scope.selected = 0;
$scope.select= function(item) {
$scope.selected = item;
};
$scope.isActive = function(item) {
return $scope.selected === item;
};
I can't understand why active state doesn't keeping if I refresh my page. I work with ng-route and everything it's ok , just active state work wrong. Can you help me, please? Thanks!

Answer 1

On startup of your controller, you should fetch current route somehow and select a particular item basing on this route.
For example, you can add slug field to your routes:
$routeProvider.
when('/pets', {
templateUrl: '...',
controller: /*...*/,
slug: 'pets'
}) /* ... */;
And then read it in your controller:
function yourController($scope, $routeParams) {
/*...*/
var selectedSlug = $routeParams.slug;
if (selectedSlug) {
$scope.selected = /* find item by selected slug */
}
}

Answer 2

Add 'slug' to routeParams
$routeProvider.
when('/pageUrl/:slug', {
templateUrl: viewUrl,
controller: someController
});
In Controller
.controller('someController', function ($scope, $routeParams, $location) {
if ($routeParams.slug) {
$scope.selected = $routeParams.slug
}
$scope.select= function(slug) {
$location.path('/pageUrl/' + slug);
};
})
In view:
<ul class="nav nav-pills" ng-controller="MenuItemCtrl as vm">
<li ng-repeat="item in names" class="col-lg-2 col-md-2 col-sm-12 col-xs-12" ng-click="select(item.slug)" ng-show="{{item.up===true}}" ng-class="{active: item.slug == selected}">
{{item.name}}
</li>
</ul>