AngularJS - directive and view are not working correctly

You have lacked some knowledge about how angularjs works in the Getters and Setter declaration of modules. But you almost got there!

Here's a brief explanation of how the module creation scheme works.

Creating Setter:

Every time you declare a module you need to pass the list of dependencies to it, even though it has no external dependencies. Ex:

angular.module( 'rdi_music', [] );

In "[]" you enter comma-separated dependencies, similar to what you did in the main.js file, but in this case you have an error because you are passing (or trying to pass) the controller "musicasController" as a dependency of this module.

The correct code snippet for the main.js file is as follows:

angular.module( 'rdi_music', [ 'ngRoute', 'ngResource', 'ui.bootstrap', 'header' ] )
  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider.when('/musicas', {
      templateUrl: 'views/musicas/index.html',
      controller: 'musicasController'
    });
  });

Creating a Getter

Whenever you already have a declared module and want to add functionality to it, you should not pass the list of dependencies to this module, so angularjs will automatically understand that it is a "setter" and will not try to create a new module.

Syntax:

angular.module( 'rdi_music' )... // restante do código

Then knowing that we already have the "rdi_music" module declared in the main.js file, the correct syntax for the index-controller.js and musicas-controller.js files should be:

angular.module('rdi_music')
  .controller('indexController', function($scope) {
    $scope.isNavCollapsed = true;
    $scope.isCollapsed = true;
    $scope.isCollapsedHorizontal = true;
  });

and

angular.module('rdi_music')
  .controller('musicasController', function($scope) {

  });

Summarizing the problem:

So knowing how angularjs works in this respect, your problem was that you declared the module "rdi_music" in the main.js file with the dependencies (including its "header" directive), then you override that module in the index- controller.js (which did not have the injection of its directive) and then overwritten that module again in the musicas-controller.js file, and how the declaration of that module in that file had only the injection of "ui-bootstrap" other features simply stopped working.

I've created a plunker more simplified with your code, but functional so that you understand the schematic of how the modules they work.

Reference:

link Browse to the "Creation versus Retrieval" section, the first paragraph describes exactly what you are experiencing.

  

Beware that using angular.module ('myModule', []) will create the   module myModule and overwrite any existing module named myModule . Use   angular.module ('myModule') to retrieve an existing module.

Final tip:

During development always keep the debug tool of the open browser (usually activated by the F12 key on your keyboard) in the "Console" tab. If there is an error the angularjs will display it there and even with a url (giant say in passing) to the angularjs own site containing all the details about the error presented and in most cases pointing out the reason for that error. >