title: where to keep global variables and functions in angularjs?
body: <p>i have some variables &amp; functions in my project that i need in every page. The data in variables are coming from cookies &amp; in functions i am calling some services to get the data.For now i am keeping them in some controller &amp; using $rootScope for global access but this didn't work when i reload the page.So where should i keep these variables &amp; functions?
  Thanks in advance</p>
  
  <p>This is the controller code-</p>
  
  <pre><code>pkController.controller('domainOneController', [
          '$scope',
          '$cookies',
          '$route',
          '$location',
          '$mdSidenav',
          '$rootScope',
          'domainService',
          'subDomainService',
          function($scope, $cookies, $route, $location, $mdSidenav, $rootScope,
                  domainService, subDomainService) {
          /*getting username from cookies to display in dashboard &amp; if not found then redirect to login page*/
  
          $rootScope.role = $cookies.get('role');
          $rootScope.userInfo = $cookies.get('login');
          $rootScope.id = $cookies.get('id');
          $rootScope.isSidenavOpen = false;
  
          if ($rootScope.userInfo == undefined
                  || $rootScope.role == undefined) {
              $location.path("/");
          }
          $rootScope.$route = $route;
  
          /*for opening slider*/
  
          $rootScope.openSlider = function() {
  
              $mdSidenav('left').toggle();
          };
  
          /*getting sub-domains from service &amp; showing sub-domains of first domain on page loading*/
  
          $scope.subDomains = subDomainService.getSubDomain(1);
          $scope.subDomains.success(function(data, status, headers, config) {
  
              $scope.subDomainNames = data.subdomains;
  
          }).error(function(data, status, headers, config) {
  
          });
  
          /*switching between pages by clicking on slider &amp; updating sub-category*/
  
          $rootScope.redirect = function(id, domain) {
  
              $rootScope.pageTitle = domain; //changing page title while switching between domains
  
              $scope.subDomains = subDomainService.getSubDomain(id + 1);
              $scope.subDomains.success(
                      function(data, status, headers, config) {
  
                          $rootScope.subDomainNames = data.subdomains;
  
                      }).error(function(data, status, headers, config) {
  
              });
  
              switch (id) {
              case 0:
  
                  $location.path("/domain_one/dashboard");
                  break;
  
              case 1:
  
                  $location.path("/domain_two/dashboard");
                  break;
  
              case 2:
  
                  $location.path("/domain_three/dashboard");
                  break;
  
              case 'myKpi':
  
                  $location.path("/myKpi/dashboard");
                  break;
              }
  
              $mdSidenav('left').toggle();
          };
  
          /*getting domains*/
  
          $rootScope.domainNames = [];
          $scope.domains = domainService.getDomain();
          $scope.domains.success(function(data, status, headers, config) {
  
              $rootScope.pageTitle = data.domains[0].Domain.name; //setting page title
  
              for (var i = 0; i &lt; data.domains.length; i++) {
  
                  $rootScope.domainNames.push(data.domains[i].Domain.name);
              }
  
          }).error(function(data, status, headers, config) {
  
          });
  
      } ]);
  </code></pre>
  
  <p>This are html pages where i am using these variables and functions-
  </p>
  
  <pre><code>            &lt;div layout="row" class="nav nav-stacked sliderMenu"&gt;
              &lt;md-sidenav md-component-id="left" md-is-open="isSidenavOpen"&gt;
                  &lt;div layout="column" &gt;
                      &lt;md-button class="panel-button firstBlock" ng-click="openSlider()"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;&lt;/md-button&gt;
                      &lt;md-button ng-repeat="domain in domainNames" ng-click="redirect($index,domain)" &gt;{{domain}}&lt;/md-button&gt;
                      &lt;md-button ng-click="redirect('myKpi')"&gt;My Kpis&lt;/md-button&gt;
                      &lt;md-button class="upload"&gt;Upload&lt;/md-button&gt;
                  &lt;/div&gt;
              &lt;/md-sidenav&gt;
          &lt;/div&gt;
  
  &lt;!-- Menu Slider Starts --&gt;
  
  &lt;div
  
      &lt;label&gt;Subcategory : &lt;/label&gt;
       &lt;md-select  placeholder="All Category" ng-model="SubDomains"&gt;
          &lt;md-option ng-repeat="(key,value) in subDomainNames" value="{{value}}"&gt;{{value}}&lt;/md-option&gt;
      &lt;/md-select&gt;
  &lt;/div&gt;
  </code></pre>