How to determine active route in AngularJS ?

The task is to determine the active route in AngularJS.

Approach: To determine which is the active route at any moment in AngularJS this can be achieved by using $on() & $location.path() method. An event can be handled by writing an event handler using a $on() method. The $routeChangeStart is an event that gets triggered when route change is initiated so, that what is handled by $rootScope.$on(). Hence, In this way whenever route change is initiated, it triggers $routeChangeStart handled by $on() event handler and then $location.path() gives the value of active route.


$rootScope.$on('$routeChangeStart', function () {

Example: Here, we are displaying which is the active route. Inside the $on() method initialize $location.path() value to any AngularJS scope variable and through expressions (data-binding) display its details.

Below is the implementation of the above approach:

File name: Active_Route.html





<!DOCTYPE html>
    <title>Angular JS Active Route</title>
    <script src
    <script src
<body style = "text-align:center;"
    <h1 style = "color:green;"
    <p><a href = "#viewLanguages">View Languages</a></p>
    <p><a href = "#viewCourses">View Courses</a></p>
    <div ng-app = "mainApp" ng-controller = "GFGController">
        <div ng-view></div>
        <p>{{ message }}</p>
        <p>{{ mylocation }} </p>
        var mainApp = angular.module("mainApp", ['ngRoute']);
        mainApp.config(['$routeProvider', function($routeProvider) {
            .when('/viewLanguages', {
                template: "<p> Details of all languages content "
                    + "available at GeeksforGeeks </p>"
            .when('/viewCourses', {
                template: "<p> Details of all courses available at"
                    + " GeeksforGeeks</p>"
                redirectTo: '/viewLanguages'
        mainApp.controller('GFGController', function(
                    $scope, $location, $rootScope) {
            $scope.message = "This page will be used to promote"
                        + " GeeksforGeeks";
            $rootScope.$on('$routeChangeStart', function () {
                $scope.mylocation = $location.path();



  • When 1st link is clicked:
  • When 2nd link is clicked:

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.