title: Cannot route to controller when using ngMaterial
body: <p>I get this error:</p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: $stateProvider &lt;- $state &lt;- HomeController &lt;- HomeController. 
  </code></pre>
  
  <p>With my code. Which says that my dependency is probably not defined or spelled correctly. But I believe it is something else, that I don't understand!? So can someone please help me. I'm trying to learn Angular Material. I have done routing in this way before and it works If I'm not go with Material. So why does Material mess things up? </p>
  
  <p>This is what I have done so far:</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app=ubeachPage&gt;
  
  &lt;head&gt;
    &lt;title&gt;UBeach&lt;/title&gt;
    &lt;link rel="stylesheet" href="node_modules/angular-material/angular-material.css"&gt;
    &lt;script src="node_modules/angular/angular.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular-route/angular-route.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="content/css/styles.css"&gt;
  
    &lt;script src="node_modules/angular-material/angular-material.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular-aria/angular-aria.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="client.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;script src="controllers\RegisterController.js"&gt;&lt;/script&gt;
    &lt;script src="controllers\HomeController.js"&gt;&lt;/script&gt;
    &lt;header ng-include="'header.html'"&gt;&lt;/header&gt;
    &lt;main ng-view&gt;&lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>client.js:</strong></p>
  
  <pre><code>var ubeachPage = angular.module('ubeachPage', ['ngMaterial', 'ngRoute', 'ngAria']);
  
  ubeachPage.config(['$routeProvider', '$mdThemingProvider', function($routeProvider, $mdThemingProvider) {
  
  $mdThemingProvider.theme('altTheme')
      .primaryPalette('green')
  
  $mdThemingProvider.theme('default')
      .primaryPalette('purple', {
          'default': '500',
          'hue-1': '100',
          'hue-2': '600',
          'hue-3': 'A100'
      })
      .accentPalette('green', {
          'default': '200'
      })
      .dark();
  
  $routeProvider
      .when('/home', {
          templateUrl: 'views/home.html',
          controller: 'HomeController'
      })
      .when('/register', {
          templateUrl: 'views/register.html',
          controller: 'RegisterController'
      })
      .when('/result', {
          templateUrl: 'views/result.html'
          //      controller: 'ResultController'
      })
      .otherwise({
          redirectTo: '/home'
      });
  }]);
  </code></pre>
  
  <p>I use a header.html file for the toolbar with page buttons.</p>
  
  <p><strong>header.html:</strong></p>
  
  <pre><code>&lt;md-toolbar class="md-hue-2"&gt;
    &lt;div class="md-toolbar-tools"&gt;
      &lt;md-button class="md-icon-button" aria-label="Settings" ng-disabled="false"&gt;
          &lt;md-icon md-svg-icon="img/icons/menu.svg"&gt;&lt;/md-icon&gt;
      &lt;/md-button&gt;
  
      &lt;h2 flex md-truncate&gt;UBeach&lt;/h2&gt;
  
      &lt;md-nav-bar md-selected-nav-item="currentNavItem"&gt;
          &lt;md-nav-item md-nav-href="#!/home" name="page1"&gt;Home&lt;/md-nav-item&gt;
          &lt;md-nav-item md-nav-href="#!/register" name="page3"&gt;Register&lt;/md-nav-item&gt;
          &lt;md-nav-item md-nav-href="#!/result" name="page2"&gt;Scoreboard&lt;/md-nav-item&gt;
      &lt;/md-nav-bar&gt;
  
      &lt;md-button class="md-icon-button" aria-label="Favorite"&gt;
          &lt;md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"&gt;&lt;/md-icon&gt;
      &lt;/md-button&gt;
  
      &lt;md-button class="md-icon-button" aria-label="More"&gt;
          &lt;md-icon md-svg-icon="img/icons/more_vert.svg"&gt;&lt;/md-icon&gt;
      &lt;/md-button&gt;
    &lt;/div&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p><strong>HomeController:</strong></p>
  
  <pre><code>angular.module('ubeachPage').controller('HomeController', [
    '$scope',
  
    function($scope) {
  
  
    }
  ]);
  </code></pre>