title: Error in my angular app structure
body: <p>My angular app structure is like this</p>
  
  <pre><code>  Controllers.js
  
       angular.module('RateRequestApp.controllers', []).
              controller('ReadOnlyController', function($scope, rateRequestService) {
  
              });
  
          angular.module('RateRequestApp.controllers', []).controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  
          });
  
          angular.module('RateRequestApp.controllers', []).controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  
          });
  
      App.JS
  
          angular.module('RateRequestApp', [
         'RateRequestApp.services',
         'RateRequestApp.controllers',
         'ui.bootstrap'
      ]);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="RateRequestApp" class="content" ng-app='RateRequestApp' ng-controller="ReadOnlyController"&gt;
      &lt;form name="palletForm" novalidate&gt;
  
          &lt;div ng-controller="ModalDemoCtrl"&gt;
              &lt;script type="text/ng-template" id="myModalContent.html"&gt;
  
              &lt;/script&gt;
  
  
          &lt;/div&gt;
  
  
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>everything looks okay to me, but this throws an error</p>
  
  <pre><code>  Error: [ng:areq] Argument 'ReadOnlyController' is not a function, got undefined
  </code></pre>
  
  <p>Can any one point out what I am doing wrong?</p>