title: Showing / hiding content based on route in Angular, only works after refresh
body: <p>I have a header + footer I don't want to show on the landing (language) page. This works, but only after a refresh. What would be best practice to solve this?</p>
  
  <p>Here's what I've got:</p>
  
  <pre><code>&lt;div ng-include= " 'includes/header.html ' " ng-show="{{currentPage != '/language'}}"&gt;
  </code></pre>
  
  <p>Inside my LanguageCtrl there's </p>
  
  <p><code>$scope.currentPage = $location.path() === "/language";</code></p>
  
  <p>I assign the controllers with ui-router $stateProvider like this:</p>
  
  <pre><code>$stateProvider
          .state('home', {
              url: "/",
              data: {
                  rule: function($cookieStore) {
                                  if ($cookieStore.get('languageCookie')) {
                                          return {
                                              toState: 'home'
                                          }
                      }
  
                                   else return {
                                          toState: 'language',
                                          toParams: {}
                                  };
                          }
              },
              controller: "HomeCtrl",
              templateUrl: "view/home.html"
          })
          .state('language', {
              url: "/language",
              controller: "languageCtrl",
              templateUrl: "view/language.html"
          })
  </code></pre>
  
  <p>note: this is not fully functional yet.</p>
  
  <p>How can I make this work without the need to refresh? 
  Do I need to put this inside .run function?</p>