title: Can a $rootScope variable be passed in state file - AngularJS
body: <p>I'm working on an Angular project and currently am working on making the entire project configurable. I have an object which contains an array of elements, each element being an object with the details of different page of the project. </p>
  
  <p>Now I'm able to get the object when the project loads but I'm stuck at the <strong>navigation</strong> part. Previously, I had passed a text in <code>ui-sref</code> and <code>state</code> file and on clicking a link the page got navigated. But now the text would be configurable, i.e editable by the user. So I passed that variable <em>(the text entered by the user)</em> in <code>ui-sref</code> and in the <code>controller</code> file. I entered the title of all the array elements to <strong>an array defined with $rootScope</strong> by iterating in the <code>controller</code> and then used this array variable in the <code>state</code> file as <code>$rootScope.array[0]</code>.</p>
  
  <p>So, <strong>is this method correct?</strong> I'm getting the following error now on loading the project -</p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to:
    Error: [$injector:unpr] Unknown provider: $rootScope</p>
  </blockquote>
  
  <p>Now i get that its saying <code>$rootScope</code> as unknown provider, but how to solve that?
  I've passed <code>$rootScope</code> as argument in all the angular files that are of concern here.</p>
  
  <p>Also - <strong>can a $rootScope variable be passed in the <code>state</code> file?</strong></p>
  
  <p>EDIT - here's the <code>controller</code> and <code>state</code> code for some information -</p>
  
  <p>Controller - <em>C:\sandboxes\projects\Tests\demo\core\src\main\webapp\app\layouts\navigate</em></p>
  
  <pre><code>$scope.getData = function() {
                return $http.get('api/configurations')
                  .success(function (response) {
                      $scope.JsonData = response;
                      return response;
                  })
                 .error(function (data, status, header, config) {
                     $scope.ResponseDetails = "Data: " + data +
                         "&lt;br /&gt;status: " + status;
                 });
          }
  
          $scope.getData().then(function(response){
              console.log(response);
              console.log($scope.JsonData[0].appConfigInfo);
              $scope.configObjectJson = JSON.parse($scope.JsonData[0].appConfigInfo);     // appConfigInfo contains the data of the different pages
              $scope.configObject = $scope.configObjectJson.PageConfig;
              console.log($scope.configObject);
  
              // below array to store the value of the title of each element of the array
              $rootScope.titleArray = [];
              for(var i=0; i &lt; $scope.configObject.dashboards.length; i++) {
                  $rootScope.titleArray[i] = $scope.configObject.dashboards[i].title;
              }
              console.log($rootScope.titleArray);
          });
  </code></pre>
  
  <p>State - <em>C:\sandboxes\projects\Tests\demo\core\src\main\webapp\app\pages\loading-page</em></p>
  
  <pre><code>angular.module('myApp')
         .config(stateConfig);
  
      stateConfig.$inject = ['$stateProvider', '$rootScope'];
  
      function stateConfig($stateProvider, $rootScope) {
  
          $stateProvider
          .state($rootScope.titleArray[0], {      // $rootScope.titleArray is the variable created in the above controller
              parent: 'home',
              url: 'loadingPage',
              data: {
                  authorities: ['ROLE_USER'],
                  pageTitle: $rootScope.titleArray[0]
              },
              views: {
                  'appContent@home': {
                      templateUrl: 'app/entities/loading-page/loadingPage.html',
                      controller: 'LoadingPageController',
                      controllerAs: 'vm'
                  }
              }
          })
      }
  </code></pre>
  
  <p><strong>Note - the <code>controller</code> and <code>state</code> files are at different locations under main folder.</strong></p>
  
  <p>I hope the question is clear enough. Any helpful comment is much appreciated. Thanks.</p>