title: AngularJS: Use ng-repeat to dynamically load CSS stylesheets
body: <p>I've split up my stylesheets into a separate module for each include, I want to dynamically load these but am having some dificulity, when rendered I only get the following for each sheet that should be loaded:</p>
  
  <pre><code>&lt;link ng-repeat="inlude in includes" rel="stylesheet" href="" class="ng-scope"&gt;
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="forum" ng-controller="masterCtrl"&gt;
  &lt;head&gt;
      &lt;title&gt;Forum&lt;/title&gt;
      &lt;link rel="stylesheet" href="/stylesheets/reset.css"&gt;
      &lt;link rel="stylesheet" href="/stylesheets/style.css"&gt;
      &lt;link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}"&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/controllers.js"&gt;&lt;/script&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="/scripts/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body ng-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my primary controller:</p>
  
  <pre><code>function masterCtrl($scope){
      $scope.includes = {
          header: {
              src: 'views/includes/header.html',
              stylesheet: 'stylesheets/header.css',
              searchQuery: ''
          },
          threadList: {
              src: 'views/includes/threadList.html',
              stylesheet: 'stylesheets/threadList.css'
          }
      };
  }
  </code></pre>
  
  <p>Everything else works fine, thanks for looking.</p>