title: Dynamic body class with Angular UI-Router
body: <p>I'm trying to find an elegant way to have a custom dynamically class of the <strong>body tag</strong> that I can set easily from the <code>ui-router configurations</code> and if none is set, I can use a default option or none.</p>
  
  <p><strong>Example:</strong></p>
  
  <p><strong><em>routes.js</em></strong></p>
  
  <pre><code>$stateProvider
        .state('login', {
             url: "/login",
             template: 'Login'
        })
        .state('register', {
             url: "/register",
             template: 'Register'
        }).
        .state('profile', {
             url: "/profile",
             template: 'Profile'
        });;
  </code></pre>
  
  <p><strong><em>Simple markup HTML</em></strong></p>
  
  <pre><code>&lt;html&gt;
     &lt;body class=""&gt; &lt;!-- Dynamically class to change --&gt;
        &lt;div ui-view&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>Scenario:</em></strong></p>
  
  <p>1 - Visiting the <code>state</code> <strong>login</strong> I should have the <strong>class</strong> of the body equals to <code>auth</code></p>
  
  <p>2 - Visiting the <code>state</code> <strong>register</strong> at this point it will have the same <code>auth</code> class</p>
  
  <p>3 - Visiting the <code>state</code> <strong>profile</strong> the body will have the <strong>default</strong> class or <strong>none</strong></p>
  
  <p>How do you achieve that? </p>