title: ANGULARJS - display title inside h1 on homepage and div tag for the rest of the site
body: <p>For accessibility compliance:  </p>
  
  <p>How do I display the title of the page inside an <code>&lt;h1&gt;</code> tag on the homepage, while display inside a <code>&lt;div&gt;</code> tag for the rest of the site.</p>
  
  <p>I am using angular <code>UI-Router</code>, with the homepage having a state of <code>'home'</code>.</p>
  
  <p>app.js:</p>
  
  <pre><code>magApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $urlRouterProvider.otherwise("/404");
  
  // Now set up the states
  $stateProvider
      .state('page_404', {
  
          templateUrl: 'apps/templates/404.html'
      })
      .state('home', {
          url: '/',
          templateUrl: 'apps/templates/home.html',
          controller : 'issueController'
      })
  </code></pre>
  
  <p>I have tried: </p>
  
  <pre><code>&lt;h1  data-ng-if="home" class="uwm-site-title"&gt;
    &lt;a href="/"&gt;Site Name&lt;/a&gt;&lt;/h1&gt;
  &lt;div date-ng-if="!home" class="uwm-site-title"&gt;
    &lt;a href="/"&gt;Site Name&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have also tried </p>
  
  <pre><code>&lt;h1  data-ng-show="$state.current.name === 'home'" class="uwm-site-title"&gt;
     &lt;a href="/"&gt;Site Name&lt;/a&gt;&lt;/h1&gt;
  &lt;div data-ng-show="$state.current.name !== 'home'" class="uwm-site-title"&gt;
     &lt;a href="/"&gt;Site Name&lt;/a&gt;&lt;/div&gt;
  </code></pre>