title: Why ng-class is not applied as per the current state of ui router?
body: <p>My application has two different views (page1 and page2), which has been configured with <code>ui-router</code>'s <code>stateProvider</code>. I want to apply a css on the body based on what page I am looking at. If I am looking at page1 I want to apply <code>class1</code> to the body of the page and <code>class2</code> for page2.</p>
  
  <p>To achieve this I am using the <code>ng-class</code> directive of the <code>angularjs</code>. The value of the <code>ng-class</code> directive is being set as per the current state of the <code>ui-router</code>.</p>
  
  <p>Here is the example code for it, the problem is that the expression inside the <code>ng-class</code> doesn't get evaluated, so my css doesn't get applied.</p>
  
  <p>Can anyone point me what I am doing wrong ?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"&gt;&lt;/script&gt;
  
      &lt;style media="screen"&gt;
  
      h2 {
        margin: 5px 5px 5px 5px;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      .class1 {
        align-items: flex-start;
      }
      .class2 {
        align-items: center;
      }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="graceApp" ng-class="$state.current.data.bodyClass"&gt;
  
      &lt;div ui-view style="display: flex"&gt;&lt;/div&gt;
  
      &lt;script&gt;
      angular
        .module('graceApp', [
          'ui.router'
        ])
        .config(function ($stateProvider, $urlRouterProvider) {
          $stateProvider
            .state('page1', {
              url: '/page1',
              template: '&lt;h2&gt;This is page1&lt;/h2&gt; &lt;h2&gt;Item1&lt;/h2&gt; &lt;h2&gt;Item2&lt;/h2&gt;',
              data: {
                bodyClass: 'class1'
              }
            })
            .state('page2', {
              url: '/page2',
              template: '&lt;h2&gt;This is page2&lt;/h2&gt; &lt;h2&gt;Item1&lt;/h2&gt; &lt;h2&gt;Item2&lt;/h2&gt;',
              data: {
                bodyClass: 'class2'
              }
            });
          $urlRouterProvider.otherwise('/page1');
        });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>