Héritage de fonction angularJs

Bonjour tout le monde !

Voila je rencontre un petit problème avec mon code , en ce qui concerne l'héritage dans les scope.
(Quelque chose à du m'échapper u__u )

Ce que je fais

Voià j'essaye de construire une navbar bootstrap en utilisant angular.
Le problème c'est que cette navbar je la rappelle sur chaque html :

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <ul class = "nav navbar-nav">
            <li ng-class="{ active: isActive('/') }">               <a href="#">Elementary</a></li>
            <li ng-class="{ active: isActive('/tableOfTypes') }">   <a href="#/tableOfTypes">Table of Types</a></li>
            <li ng-class="{ active: isActive('/cardsGenerator') }"> <a href="#/cardsGenerator">Cards Generator</a></li>
        </ul>
    </nav>

En utilisant une fonction isActive();

Suis - je obligé pour chaque .js associé à son html de redéclarer isActive () ?

J'ai essayé de le déclarer dans mon app.js mais pas dans les .js de mes vues :

angular.module('myApp', [
  'ngRoute',
  'ngResource',
  'myApp.tableOfTypes',
  'myApp.cardsGenerator',
  'myApp.version'
]).

config(['$routeProvider', function($routeProvider) {
      $routeProvider.otherwise({redirectTo: '/tableOfTypes'});
      controller: 'mainController'
}])

.controller('mainController', [ '$scope', '$location',
  function($scope, $location) {
    $scope.isActive = function (viewLocation) {
      var active = (viewLocation === $location.path());
      return active;
    };
}]);

Mais ça ne marche pas.

Voici un .js d'une de mes vue par exemple :

'use strict';

angular.module('myApp.tableOfTypes', ['ngRoute'])

.config(['$routeProvider' , function($routeProvider) {
  $routeProvider.when('/tableOfTypes', {
    templateUrl: 'views/tableOfTypes/tableOfTypes.html',
    controller: 'typesController'
  });
}])

.controller('typesController', [ '$scope','$http', '$location',
        function($scope, $http, $location) {
            $http.get('resources/Types.json').success(function(data) {
                $scope.types = data.Types;
            });

            $scope.getLogos = function ($weakness) {
                var logo_path = 'resources/logo/32x32/' + $weakness +'_32x32.svg';
                return logo_path;
            }

            //$scope.isActive = function (viewLocation) {
            //    var active = (viewLocation === $location.path());
            //    return active;
            //};
}]);

J'aimerais aussi savoir s'il est possible de déclarer ma navbar dans un fichier à part pour l'importer ensuite dans chaque html.

Je suis tout nouveau en html / angularjs :'(.

Je vour remercie déjà d'avance !
Encore merci !