AngularJS Dynamic CSS classes per route

var app = angular.module('plunker', []);

app.config(function($routeProvider) {
  $routeProvider.when('/one', {
    templateUrl: 'one.html',
    css: 'one.css'
  });
  $routeProvider.when('/two', {
    templateUrl: 'two.html',
    css: 'two.css'
  });
  $routeProvider.otherwise({
  });
});

app.controller('MainCtrl', function($scope, $routeParams, $route, $location) 
{
  $scope.$watch(function()
  {
    return ($route.current && $route.current.css) ? $route.current.css : 'home.css';
  }, 
  function(value) 
  {
    $scope.css = value;
  });
});

body {color: green;}

body {color: red;}

<!doctype html>
<html ng-app="plunker"  ng-controller="MainCtrl">
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="http://code.angularjs.org/1.1.3/angular.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" ng-href="{{css}}">
</head>
<body>
  <h1>Route-dependent stylesheets</h1>
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <div ng-view></div>
</body>
</html>

<span class="x">This should be red</span>

/* Put your css in here */

<span class="x">This should be green</span>

body {color: blue;}