AngularJS - On the click does not reach the method of the controller


I am learning Angularjs and Nodejs by developing a project. I have followed this tutorial and organised my folder structure and route configurations.

Problem: I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.

My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.

I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.

Below is the html and the js codes.


<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <base href="/">
        <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/ets.css">

    <body ng-app="etsApp">
        <div id="mainDiv">
                <section id="header_section" class="main-title"></section>
                <section id="nav_section"></section>
            <section id="body_section">
                <div ng-view="ng-view"></div>
            <section id="footer_section" class="footer-style"></section>

        <script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript">


  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">

      <li ng-class="{active : isActive('/home')}" id="nav_home">
        <a href="/home">Home</a>

      <li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
        <a href="/expensereporting">Expense Reporting</a>

      <li ng-class="{active : isActive('/remainders')}">
        <a href="/remainders" id="nav_remain">Todo Remainder's</a>

      <li ng-class="{active : isActive('/pdfoperations')}">
        <a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>

      <li ng-class="{active : isActive('/imageoperations')}">
        <a href="/imageoperations" id="nav_img">Image Operation's</a>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>


  <header id="header" style="margin-left: 50px;">
      <a href="/" style="text-decoration: none; color: black;">
        <strong>eTools Store</strong>


angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'



    angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);


angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.isActive = function(destination) {
            return destination === $location.path();


Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this

.controller('NavCtrl', function($scope) {
    isActive = function(destination) { /*...*/ }

Put it into file js/nav.js and add to your html

<script type="text/javascript" src="js/nav.js"></script>

And then add this controller to your navigation_main.html code

<div ng-controller="NavCtrl">