title: Separate AngularJS Controllers Into Separate Files
body: <p>I am using <a href="https://github.com/angular-ui/ui-router" rel="nofollow">Ui-Router</a> with my AngularJS application, and am wondering how I split my angular controllers into different files to make them much more clean.</p>
  
  <p>For example:</p>
  
  <pre><code>var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize',
   'ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']);
  
  app.config(function($stateProvider, $urlRouterProvider){
  
  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/my_requisitions/list");
  
  $stateProvider
      .state('my_requisitions', {
          url: "/my_requisitions",
          templateUrl: "../../../partials/requisitions/my_requisitions.ctp",
          //controller: 'my_controller'
      })
      .state('my_requisitions.list', {
          url: "/list",
          templateUrl: "../../../partials/requisitions/my_requisitions.list.ctp",
          //controller: 'my_controller'
  
      })
      .state('my_requisitions.add', {
          url: "/add/:type",
          templateUrl: "../../../partials/requisitions/my_requisitions.add.ctp",
          controller: 'my_controller'
  
      })
      .state('manage_requisitions', {
          url: "/manage_requisitions",
          templateUrl: "../../../partials/requisitions/manage_requisitions.ctp"
      })
      .state('manage_requisitions.list', {
          url: "/list",
          templateUrl: "../../../partials/requisitions/manage_requisitions.list.ctp",
          controller: 'manage_controller'
      })
  })
  </code></pre>
  
  <p>In this code, how would I make it so that my_controller could be declared in an outside file rather than declaring it at the bottom like so:</p>
  
  <pre><code>app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {
  etc....
  </code></pre>
  
  <p>simply referencing the javascript file in the main HTML file and then declaring the controller with app.controller... does not seem to work.</p>
  
  <p>Thanks in advance!</p>