embedding <link> into template

I am using routes and ng-view in the body of the page:

<!doctype html>
<html ng-app="app">
  <head>
  ...
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>

My templates have <link> elements in them:

<link rel="stylesheet" type="text/css" href="style.css">

The problem is that IE8 does not recognize <link> elements in the body. As well as <style> and maybe others. It seems to ignore them. They have to be in the <head>. So my template has to be split, one part needs to go to the <head> and the other to <body>.

How to go around this?

You can get your templates to register their links with an Angular Service and then have a controller in your head tag that populates a list of links.

Here is a example: http://plnkr.co/edit/1a6U9f

app.factory('LinkService', function() {
  var links = {};
  return {
    links: links,
    addLink: function(href, relation) {
      links[href] = { href: href, relation: relation };
    },
    removeLink: function(href) {
      delete links[href];
    }
  };
});

app.controller('LinkController', function($scope, LinkService) {
  $scope.links = LinkService.links;
});

app.controller('Template1Controller', function($scope, LinkService) {
  LinkService.addLink('template1.css','stylesheet');
  $scope.$on('$destroy', function() {
    LinkService.removeLink('template1.css');
  });
});

Then in your html (inline partials for demo purposes):

<head ng-controller="LinkController">
  ...
  <link rel="{{link.relation}}" ng-href="{{link.href}}" ng-repeat="link in links">
</head>
<body ng-controller="MainCtrl">
  <!-- You could use ng-view here -->
  <ng-include src="someTemplateField"></ng-include>

  <script type="text/ng-template" id="template1">
    <div class="red" ng-controller="Template1Controller">Template 1</div>
  </script>

</body>