title: Dynamic css in Angular
body: <p>Hi I have 3 languages on site, one of them has right-to-left letters, so when I change language I need dynamicly update css. Don't know how to do it. The problem is: I have ng-view, that has languages, where I change languages, and I have HeadController for whole document and when I change language inside ng-view, my Head controller don't see this changes.
  Here my index:</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en" ng-app="ow" ng-controller="HeadCtrl"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/&gt;
          &lt;title&gt;OW&lt;/title&gt;
          &lt;link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" /&gt;
          &lt;script src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="lib/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="fontMain"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and app.js</p>
  
  <pre><code>angular.module('ow', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/:placeId', {templateUrl: 'partials/menu.html',   controller: MenuCtrl}).
      when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
      when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
      when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
      when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
      otherwise({redirectTo: '/0'});
  }]).controller("HeadCtrl", function($scope, sharedData) {
      if (sharedData.getLang() == "he") {
          $scope.stylesheets = [
              {href: "css/base.css", type: "text/css"},
              {href: "css/right.css", type: "text/css"}
          ];
      }
      else {
          $scope.stylesheets = [
              {href: "css/base.css", type: "text/css"},
              {href: "css/left.css", type: "text/css"}
          ];
      }
  });
  </code></pre>
  
  <p>sharedData - contains shared values</p>
  
  <p>and here Language controller:</p>
  
  <pre><code>    // Controller for language changes
  function LangCtrl($routeParams, $location, sharedData, $scope) {
      sharedData.setLang($routeParams.lang);
      $location.path("/");
  }
  </code></pre>