Angular - when scrolling the page, change the active menu items

Task: add / remove class to active menu elements in aside:
1) when scrolling through pages;
2) when clicking on the menu items. An example of what I want to get is http://codepen.io/anon/pen/gHoAt/

Code:
aside.html

<nav ng-if="state.is('ui.uikit.kendo') || state.is('ui.uikit.charts')"> <ul class="menu-v"> <li class="level-1"><span><strong>KENDO CONTROLS</strong></span></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#textinputs">Text inputs</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#selects">Selects</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#datetimepickers">Date and time picker</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#panelbar">Panel bar</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#tabs">Tabs</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#editor">Editor</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#buttons">Buttons</a></li> <li class="level-1"><a href="#{{skin}}/ui/kendo#grid">Grid</a></li> <li class="level-1"><span><strong>KENDO CHARTS</strong></span></li> <li class="level-1"><a href="#{{skin}}/ui/charts#areacharts">Area charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#barcharts">Bar Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#boxplotcharts">Box Plot Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#bubblecharts">Bubble Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#bulletcharts">Bullet Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#donutcharts">Donut Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#funnelcharts">Funnel Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#linecharts">Line charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#piecharts">Pie Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#polarcharts">Polar charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#radarcharts">Radar charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#sparklines">Sparklines</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#rangecharts">Range Bar Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#scattercharts">Scatter Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#stockcharts">Stock Charts</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#treemap">TreeMap</a></li> <li class="level-1"><a href="#{{skin}}/ui/charts#waterfallcharts">Waterfall Charts</a></li> </ul> 

app.js

 'use strict'; // Declare app level module which depends on filters, and services angular.module('qcp', [ 'ui.router', 'qcp.filters', 'qcp.services', 'qcp.directives', 'qcp.controllers', 'hljs' ]) .run(function ($rootScope, InjectCss, $log, $state, $timeout, $location) { var styles = { 'base': { before: [ 'css/kendo/kendo.common.min.css', 'css/kendo/kendo.nova.css' ], after: [] }, 'sphere': { before: [ 'css/kendo/kendo.common.min.css', 'css/kendo/kendo.sphere.css' ], after: ['css/ui.sphere.css'] }, 'express': { before: [ 'css/kendo/kendo.common.min.css', 'css/kendo/kendo.express.css' ], after: ['css/ui.express.css'] }, 'sberbank': { before: [ 'css/kendo/kendo.common.min.css', 'css/kendo/kendo.sberbank.css' ], after: ['css/ui.sberbank.css'] }, 'beeline': { before: [ 'css/kendo/kendo.common.min.css' , 'css/kendo/kendo.beeline.css' ] , after: ['css/ui.beeline.css'] } }; $rootScope.state = $state; $rootScope.changeTheme = function (themeName) { $rootScope.skin = themeName; var styleBandle = styles[themeName]; $log.log('ui change theme to', themeName); return InjectCss.setCss(styleBandle); }; $rootScope.themeUrl = function (themeName) { return $state.href($state.current.name, {currentTheme: themeName}); }; $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { $timeout(function(){ UiKitJQinit(); }, 1) }); }) .config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/base/ui"); $stateProvider.state('ui', { url: '/:currentTheme', abstract: true, views:{ /*'toolbar' : {templateUrl:'partials/layouts/toolbar.html'},*/ 'aside' : {templateUrl:'partials/layouts/aside.html'}, 'header' : {templateUrl:'partials/layouts/header.html'}, 'main' : {template :'<div ui-view></div>'} }, controller: ['$scope', '$log', 'theme', '$stateParams', function ($scope, $log, theme, $state) { $scope.$state = $state; }], resolve: { theme: ['InjectCss', '$stateParams', '$rootScope', function (InjectCss, $stateParams, $rootScope) { return $rootScope.changeTheme($stateParams.currentTheme) }] } }); $stateProvider.state('ui.uikit' , {url: '/ui' , templateUrl: 'partials/uikit.html'}); $stateProvider.state('ui.uikit.all' , {url: '/all' , views: {'@ui':{templateUrl: 'partials/uikit/all.html'}}}); $stateProvider.state('ui.uikit.reset' , {url: '/reset' , views: {'@ui':{templateUrl: 'partials/uikit/reset.html'}}}); $stateProvider.state('ui.uikit.iconsGlyph' , {url: '/iconsGlyph' , views: {'@ui':{templateUrl: 'partials/uikit/iconsGlyph.html'}}}); $stateProvider.state('ui.uikit.controls' , {url: '/controls' , views: {'@ui':{templateUrl: 'partials/uikit/controls.html'}}}); $stateProvider.state('ui.uikit.nav' , {url: '/nav' , views: {'@ui':{templateUrl: 'partials/uikit/nav.html'}}}); $stateProvider.state('ui.uikit.list' , {url: '/lists' , views: {'@ui':{templateUrl: 'partials/uikit/lists.html'}}}); $stateProvider.state('ui.uikit.layout' , {url: '/layouts' , views: {'@ui':{templateUrl: 'partials/uikit/layouts.html'}}}); $stateProvider.state('ui.uikit.notices' , {url: '/notices' , views: {'@ui':{templateUrl: 'partials/uikit/notices.html'}}}); $stateProvider.state('ui.uikit.kendo' , {url: '/kendo' , views: {'@ui':{templateUrl: 'partials/kendo/controls.html'}}}); $stateProvider.state('ui.uikit.charts' , {url: '/charts' , views: {'@ui':{templateUrl: 'partials/kendo/charts.html'}}}); $stateProvider.state('ui.widgets' , {url: '/widgets' , templateUrl: 'partials/widgets.html'}); $stateProvider.state('ui.services' , {url: '/services' , templateUrl: 'partials/services.html'}); $stateProvider.state('ui.browsers' , {url: '/browsers' , templateUrl: 'partials/browsers/browsers.html'}); $stateProvider.state('ui.browsers.ie' , {url: '/ie' , views: {'@ui':{templateUrl: 'partials/browsers/ie.html'}}}); $stateProvider.state('ui.errors' , {url: '/error' , templateUrl: 'partials/errors/error.html'}); $stateProvider.state('ui.errors.404' , {url: '/404' , views: {'@ui':{templateUrl: 'partials/errors/404.html'}}}); $stateProvider.state('ui.errors.500' , {url: '/500' , views: {'@ui':{templateUrl: 'partials/errors/500.html'}}}); $stateProvider.state('ui.informator' , {url: '/product/informator', templateUrl: 'partials/informator/index.html'}); $stateProvider.state('ui.login' , {url: '/login' , templateUrl: 'partials/login/index.html'}); $stateProvider.state('ui.login.password' , {url: '/password' , views: {'@ui':{templateUrl: 'partials/login/password.html'}}}); }); 

I am looking for a solution through AngularJS. What I have now (I work only with a click event): Using the example of two elements:

 <li class="level-1" ng-class="{'active': anchorHref=='piecharts'}" ng-click="piechartsHref()"><a href="#{{skin}}/ui/charts#piecharts">Pie Charts</a></li> <li class="level-1" ng-class="{'active': anchorHref=='polarcharts'}" ng-click="polarchartsHref()"><a href="#{{skin}}/ui/charts#polarcharts">Polar charts</a></li> 

app.js

 $scope.hashPage = $location.hash(); $scope.piechartsHref = function() { $scope.anchorHref = 'piecharts'; } $scope.polarchartsHref = function() { $scope.anchorHref = 'polarcharts'; } 

The disadvantages of what is being done now are:
1) It is necessary to create a function for each element of the list (like polarchartsHref, piechartsHref)
2) At initial page initialization, no class is assigned to the active menu item.