title: AngularJS Unknown Provider Error Message
body: <p>I have an angular app that will not load and is returning the error message:</p>
  
  <blockquote>
    <p>Error: [$injector:unpr] Unknown provider: navigatorProvider &lt;-
    navigator &lt;- LayoutController</p>
  </blockquote>
  
  <p>This is ever since I introduced a service I have this registered on the controller, but it still not working. The controller referenced is: </p>
  
  <pre><code>(function () {
      "use strict";
      angular.module("HtJobPortal").controller("LayoutController",LayoutController);
  
      LayoutController.$inject = ["$scope", "navigator"];
  
      function LayoutController($scope, navigator){      
          var layout = this;
  
          // Layout
          layout.loadTemplate = function() {
              return navigator.loadTemplate();
          }
  
          // Initialise pending and set roles
          layout.init = function () {
              // Global Start up
          };
          layout.init();
      }
  
  })();
  </code></pre>
  
  <p>This is the service: </p>
  
  <pre><code>(function() {
  
      var navigator = angular.module('navigator', []);
      navigator.factory('loadTemplate', function () {
          var loadTemplate = this;
  
          // Page Directory
          navigator.login = "templates/login.html";
          navigator.dashboard = "templates/dashboard.html";
          navigator.job = "templates/job.html";
  
          // Template switcher
          navigator.loadTemplate = function () {
              return navigator.login;
          }
  
          return loadTemplate;
      });
  
  }());
  </code></pre>
  
  <p>And the app page just in case I've missed something there:</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular.module('HtJobPortal', []);
  })();
  </code></pre>