title: Controller not registering when using nested view
body: <p>My app was working fine until I changed routing from ngRoute to ui-Router so I could use power of views within views. Now the controllers of the views are not being registered. My folder structure is like this:</p>
  
  <p><a href="https://i.stack.imgur.com/J0hAq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J0hAq.png" alt="enter image description here"></a></p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="myApp"&gt;
    &lt;body&gt;
    
        &lt;div ui-view&gt;&lt;/div&gt;
  
        &lt;script src="js/app.module.js"&gt;&lt;/script&gt;
        &lt;script src="js/components/foodCategories/foodCategoriesController.js"&gt;&lt;/script&gt;
        &lt;!-- other controllers --&gt;
        &lt;script src="js/app.route.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.module.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', ['ui.router'])</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>app.route.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp')
    .config(['$stateProvider', '$urlRouterProvider', statesManager])
  
  function statesManager($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/')
  
    $stateProvider
      .state('profile', {
        url: '/profile',
        views: {
          '': {
            templateUrl: '/js/components/profile.html'
          },
          'foodCategories@profile': {
            templateUrl: '/js/components/foodCategories/foodCategories.html',
            controller: 'FoodCategoriesController'
          }
        }
      })
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>profile.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ui-view="foodCategories"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>foodCategories.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="foodcategories" ng-controller="FoodCategoriesController"&gt;
  &lt;!-- other stuffs --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>foodCategoriesController.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
    angular
      .module('myApp')
      .controller('FoodCategoriesController', controlFunc)
  
    function controlFunc ($scope) {
    ....my stuffs...
    }
  })()</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am not sure why the controller is not being registered. The controller file is loaded when I check Networks in Developers Tools but I get Error: [$controller:ctrlreg] on all controllers.
  Thank You :)</p>