title: unloading/destroying Angular lazy loaded components
body: <p>I have a setup that is similar to the post found here <a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow">http://ify.io/lazy-loading-in-angularjs/</a> to handle lazy loading various components of my app in Angular.</p>
  
  <p>The problem I'm having is that the more components one loads, the memory footprint of the app grows (obvious, I know). Is there a clean way to 'unload' or 'destroy' angular services / controllers/ directives / etc that have been lazy loaded?</p>
  
  <p>simple example (for reference)</p>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('parentApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
  
          var app = angular.module('app', ['ui.router'])
              .config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
  
                  app.lazy = {
                      controller: $controllerProvider.register,
                      directive: $compileProvider.directive,
                      filter: $filterProvider.register,
                      factory: $provide.factory,
                      service: $provide.service
                  };
  
                  $urlRouterProvider.otherwise('/home');
                  $stateProvider
                      .state('home', {
                          url: '/home',
                          templateUrl: 'views/main.html',
                          controller: 'MainCtrl'
                      })
                      .state('lazyLoad', {
                          url: '/lazyLoad',
                          templateUrl: 'views/lazyLoad.html',
                          controller: 'lazyLoadCtrl',
                          resolve: {
                              promiseObj: function ($q, $rootScope) {
                                  var deferred = $q.defer();
                                  var dependencies = [
                                      'scripts/controllers/lazyLoad.js'
                                  ];
  
                                  $script(dependencies, function () {
                                      $rootScope.$apply(function () {
                                          deferred.resolve();
                                      });
                                  });
  
                                  return deferred.promise;
                              }
                          }
                      });
              });
  </code></pre>
  
  <p>and the lazy loaded controller lazyLoad.js</p>
  
  <pre><code>angular.module('app')
    .lazy.controller('lazyLoadCtrl', function($scope){
          $scope.greeting = 'hi there';
        }
  );
  </code></pre>
  
  <p>If a user navigates to <code>#/lazyLoad</code>, the app will load in the controller (and view), and what ever else it is told it needs. But when the user navigates away from <code>#/lazyload</code>, I want all the previously loaded components to be unloaded / destroyed.</p>
  
  <p>How would I entirely de-register / destroy / unload (not sure what the correct verb would be here...) the 'lazyLoadCtrl' controller. As stated above, Ideally I'd like to be able to unload the lazy loaded controllers, directives, filters, factories and services, once they are no longer needed.</p>
  
  <p>Thanks!</p>