title: AngularJS - UI-Routing - how to use the route state as variable in controller?
body: <p>I am using Angular JS and UI-Routing. The routing works fine. My problem is showing and hiding a slider depending on what page the user is on.</p>
  
  <p>My index.html looks something like this:</p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
  
  &lt;header ng-include="'templates/header.html'"&gt;&lt;/header&gt;
  &lt;div&gt;Code for slider&lt;/div&gt;
  
  
  &lt;!--=== Content Part ===--&gt;
  &lt;div class="container"&gt; 
  &lt;div class="row" &gt;
      &lt;div ui-view autoscroll="false"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;!--/container--&gt;     
  &lt;!-- End Content Part --&gt;
  
  &lt;footer ng-include="'templates/footer.html'"&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>my app.js looks like this:</p>
  
  <pre><code>angular
  .module('myApp', ['ui.router'])
  .config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
      $urlRouterProvider.otherwise('/');
      $stateProvider
          .state('home',{
              url: '/',
              templateUrl: 'templates/home.html'
          })
          .state('about',{
              url: '/about',
              templateUrl: 'templates/about.html'
          })
          .state('contact',{
              url: '/contact',
              template: 'CONTACT'
          })
  }])
  .controller()
  </code></pre>
  
  <p>Now I tried to include the slider in the home.html template but then it does not properly work due to initialisation requirements. When I use a controller in the different routes it is out of scope. So how do I pass a variable referring to the state to a controller indepent of the route so I can use it for it something like</p>
  
  <pre><code>if (state==home) {
     $scope.showSlider==true;
  }else{ $scope.showSlider==false;}
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Gerd</p>
  
  <p>UPDATE:
  @Chris T</p>
  
  <p>I have added this to my app.js:</p>
  
  <pre><code> .controller('myController',['$scope', '$state', function($scope,$state){
  if ($state.includes('home')){
      $scope.showIt=true;
  
  }else{
      $scope.showIt=false;
  }
   }])
  </code></pre>
  
  <p>Then I applied the controller to a div I wrapped around the slider and used</p>
  
  <pre><code> ng-show="showIt"
  </code></pre>