Angular: Controller does not find Model

Question

On my main page shows me the error: Uncaught ReferenceError: Insidetv is not defined, i.e., the Controller is not finding the file of Model. But if I put the two in the same file works perfectly.

On the main page first is calling the Model and then the Controller and both pages are being found.

Model

var Insidetv = angular.module('Insidetv', []);

Insidetv.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[{');
    $interpolateProvider.endSymbol('}]');
});

Controller

Insidetv.controller('ListaController', function($scope, $http) {
    $scope.dragStop = function(e, ui) {
        console.log('ok');
    }

    $('.drop').sortable({
        connectWith: "ul",
        revert: true,
        appendTo: '.lista',
        helper: 'clone',
        stop: $scope.dragStop
    });
});

Answer 1

It may be that your variable Insidetv has not been instantiated before creating your controller. Try to leave javascript files always in upload order.

But according to the angular styleguide on the part of modules you should not set a variable to encapsulate the module, but use chaining.

When using a module, avoid using a variable and Instead use chaining with the getter syntax.

That way you can solve two problems at once

Answer 2

As mentioned by Marcus Dacorrégio, it is not recommended to work this way.

The right thing to do would be to do something like this, each in its own separate file:

// app.module.js
angular.module('Insidetv', []);

// app.config.js
angular.module('Insidetv')
   .config(function($interpolateProvider){
      $interpolateProvider.startSymbol('[{');
      $interpolateProvider.endSymbol('}]');
   });

// lista.controller.js
angular.module('Insidetv')
   .controller('ListaController', function($scope, $http) {
      $scope.dragStop = function(e, ui) {
         console.log('ok');
      }

      $('.drop').sortable({
         connectWith: "ul",
         revert: true,
         appendTo: '.lista',
         helper: 'clone',
         stop: $scope.dragStop
      });
});