classes are not taking action on other pages in angular
<p>I'm using <code>ngRoute</code> in angular. The routing works fine, but <code>page 1</code> and <code>page 2</code> are not being styled. In my css file I'm just simply changing the background color for testing. </p>

<pre><code>&lt;!doctype html&gt; 
&lt;html&gt; 
&lt;head&gt; 
    &lt;link rel = "stylesheet" href = "main.css"&gt; 
    &lt;script src =   "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src = "main.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body ng-app = "app"&gt; 
    &lt;div class = "page {{pageClass}}" ng-view&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is my JS file:</p>

<pre><code>var app = angular.module("app", ["ngRoute" , "ngAnimate"]); 

app.config(function($routeProvider) { 
$routeProvider
    .when("/" , { 
        templateUrl: "intro.html", 
        controller: "intro-controller"
    })
    .when("/page1" , { 
        templateUrl: "page1.html", 
        controller: "page1-controller"
    })
    .when("/page2" , { 
        templateUrl: "page2.html", 
        controller: "page2-controller"
    })
}); 

app.controller("intro-controller" , function($scope) { 
  $scope.pageClass = "intro";
});
app.controller("page1-controller" , function($scope) { 
  $scope.pageClass = "page1";
});  
app.controller("page2-controller" , function($scope) { 
  $scope.pageClass = "page2";
}); 
</code></pre>

<p>This is my css file </p>

<pre><code>.page { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.intro { 
  background: blue; 
}
.page1 { 
  background: red; 
}
.page2 { 
  background: green; 
}
</code></pre>