title: How can I remove CSS files loaded via $ocLazyLoad from a particular ui-router state?
body: <p>Here is the basic setup of my app: I have a main application (myApp) and two modules underneath (view1, view2).</p>
  
  <p>Here is myApp:</p>
  
  <pre><code>angular.module('myApp', [
    'ngRoute',
    'ui.router',
    'oc.lazyLoad',
    'myApp.view1',
    'myApp.view2',
    'myApp.version'
  ])
  
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
  function ($stateProvider, $urlRouterProvider, $locationProvider) {
  $urlRouterProvider.otherwise(function ($injector, $location) {
      var $state = $injector.get("$state");
      $state.go('view1'); 
    });
  
  }])
  
  .config(['$ocLazyLoadProvider',
    function ($ocLazyLoadProvider) {
      $ocLazyLoadProvider.config({
        loadedModules: ['myApp', 'myApp.view1', 'myApp.view2'],
        cssFilesInsertBefore: 'ng_load_plugins_before' // load the css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
      });
    }]);
  </code></pre>
  
  <p>And here is view1 (view2 is exactly the same except for changing the 1s for 2s):</p>
  
  <pre><code>'use strict';
  
  angular.module('myApp.view1', ['ngRoute', 'ui.router', 'oc.lazyLoad'])
  
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
  function ($stateProvider, $urlRouterProvider, $locationProvider) {
    var view1State = {
      name: 'view1',
      url: '/view1',
      templateUrl: 'view1/view1.html',
      resolve: ['$ocLazyLoad', function ($ocLazyLoad) {
        return $ocLazyLoad.load({
          insertBefore: '#ng_load_plugins_before',
          files: [
            'view1/view1.css'
          ]
        });
      }],
    }
  
    $stateProvider.state(view1State);
  }])
  
  .controller('View1Ctrl', [function() {
  
  }]);
  </code></pre>
  
  <p>view1.css changes all text to blue and view2.css changes all text to red. </p>
  
  <p><strong>Here is how it is currently working:</strong> I start on view1 and all the text is blue. I go to view2, it adds view2.css to the head element, but when I go back to view1, it doesn't unload view2.css so the text remains red forever.</p>
  
  <p><strong>Here is how I would like it to work:</strong> I start on view1 and all the text is blue. I then go to view2, it removes view1.css from the head element and adds view2.css, changing all the text to red. When I go back to view1, it removes view2.css from the head element and the text is blue once again.</p>
  
  <p>How do I accomplish this?</p>