title: Angular UI Router injector Error in my framework
body: <p>I have an Angular framework I am building that I am trying to make router agnostic, I would like to be able to use any router. So far I have tested it with ng router and it works fine, but when I try to use UI-Router I am getting the injector error. I am not sure if I have placed it in the wrong module, or if it a deeper issue. The framework broadcasts a route or a state, depending on how I set up the Framework directive. I have injected UI-Router into my main module and injected $stateProvider into my controller that needs to use it. I am stumped. Any help would be greatly appreciated.
  Here is main module: </p>
  
  <pre><code> (function () {
  "use strict";
  
     angular.module("app", ["ptFramework", "ui.router", "ngStorage",    "ui.bootstrap"]);
  })();
  </code></pre>
  
  <p>Here is framework module:</p>
  
  <pre><code> (function () {
  "use strict";
  angular.module("ptFramework", [,"ptMenu", "ptDashboard"]);
  </code></pre>
  
  <p>})();</p>
  
  <p>Here is framework controller:</p>
  
  <pre><code> (function () {
  "use strict";
  
  angular.module("ptFramework").controller("ptFrameworkController",
  ['$scope', '$window', '$timeout', '$rootScope', '$stateProvider',
      function ($scope, $window, $timeout, $rootScope, $stateProvider) {
  
          $scope.isMenuVisible = true;
          $scope.isMenuButtonVisible = true;
          $scope.isMenuVertical = true;
  
          $scope.$on('pt-menu-item-selected-event', function (evt, data) {
              $scope.stateString = data.state;
              $stateProvider.go(data.state);
              checkWidth();
              broadcastMenuState();
          });
  
          $scope.$on('pt-menu-orientation-changed-event', function (evt, data) {
              $scope.isMenuVertical = data.isMenuVertical;
              $timeout(function () {
                  $($window).trigger('resize');
              }, 0);
          });
  
          $($window).on('resize.ptFramework', function () {
              $scope.$apply(function () {
                  checkWidth();
                  broadcastMenuState();
              });
          });
          $scope.$on("$destroy", function () {
              $($window).off("resize.ptFramework"); // remove the handler added earlier
          });
  
          var checkWidth = function () {
              var width = Math.max($($window).width(), $window.innerWidth);
              $scope.isMenuVisible = (width &gt;= 768);
              $scope.isMenuButtonVisible = !$scope.isMenuVisible;
          };
  
          $scope.menuButtonClicked = function () {
              $scope.isMenuVisible = !$scope.isMenuVisible;
              broadcastMenuState();
  
          };
  
          var broadcastMenuState = function () {
              $rootScope.$broadcast('pt-menu-show',
                  {
                      show: $scope.isMenuVisible,
                      isVertical: $scope.isMenuVertical,
                      allowHorizontalToggle: !$scope.isMenuButtonVisible
                  });
          };
  
          $timeout(function () {
              checkWidth();
          }, 0);
  
      }
  ]);
  </code></pre>
  
  <p>})();</p>
  
  <p>As you can see I have injected $stateProvider in both the minsafe array and the function. I dont understand why I am getting this error</p>
  
  <p>Here is the rote.config where I use it:</p>
  
  <pre><code>     "use strict";
  angular.module('app').config([
      '$stateProvider', function ($stateProvider) {
  
          $stateProvider
              .state('dashboard',
              {
                  url: "/dashboard",
                  template: "&lt;h1&gt;dashboard&lt;/h1&gt;"
              });
  </code></pre>
  
  <p>Any input would be greatly appreciated.</p>
  
  <p>Thanks,
  John.</p>