Ionic , separated controllers, not working

Question

I created ionic app using yeoman generator. I started app using grunt serve and added one new controller named settings.

Index.html:

<script src="scripts/controllers/settings.js"></script>

Settings js:

'use strict';

/**
 * @ngdoc function
 * @name musicPadApp.controller:SettingsCtrl
 * @description
 * # SettingsCtrl
 * Controller of the musicPadApp
 */
angular.module('musicPadApp')
  .controller('SettingsCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

app.js:

   .state('app.settings', {
          url: '/settings',
          views: {
              'menuContent' :{
                  templateUrl: 'templates/settings.html',
                  controller: 'SettingsCtrl'
              }
          }
      })

But on the settings page i always get following error:

Error: [ng:areq] Argument 'SettingsCtrl' is not a function, got undefined

What i'm doing wrong and how to solve it?

Default file for all controllers is following:

'use strict';
angular.module('MusicPad.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  },

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  }
})

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
});

Thanks for any help.

Answer 1

I solved it by this way:

Each of your controllers can be in its own file and you declare it like this.

angular.module('ionicApp').controller('MainCtrl', function ($scope) { ... });

Link:

http://forum.ionicframework.com/t/separating-out-the-controllers-into-different-js-files/2554