title: Getting nested angular modules to inject properly
body: <p>I am having an issue with injecting the angular toaster service into a factory object I have, when I get toaster injected without errors, the ngAnimate injection fails on the toaster. As far as I can tell I have done it correctly, so I am not sure what I have missed here.    </p>
  
  <p>Error Message: </p>
  
  <pre><code>Uncaught Error: [$injector:modulerr] Failed to instantiate module apptSetting due to:
  Error: [$injector:modulerr] Failed to instantiate module toaster due to:
  Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
  Error: [$injec...&lt;omitted&gt;...1) 
  </code></pre>
  
  <p>Main app file:</p>
  
  <p>//Creates the initial angular application module</p>
  
  <pre><code>var app = angular.module("testApp", ['angularSpinner', 'ngResource', 'ui.bootstrap', 'toaster', 'app.controllers', 'app.factories']);
  angular.module("app.factories", []);
  angular.module("app.controllers", []);
  </code></pre>
  
  <p>factory file:</p>
  
  <pre><code>angular.module('app.factories').factory('dataFactory', ['$rootScope', '$resource', '$http', 'toaster', function ($rootScope, $resource, $http, toaster) {
  return {
      UpdateOrderStatus: function(orderId) {
          return $http({
              url: "/path/UpdateOrderStatus",
              dataType: "json",
              method: "POST",
              data: { orderId: orderId },
              headers: {
                  "Content-Type": "application/json; charset=utf-8"
              }
          }).success(function(order) {
              toaster.pop('success', "Order status Update", "Order status successfully updated.");
          }).error(function() {
              //toaster.error("Order status update failed.");
          });
      }
  </code></pre>
  
  <p>Partial Toaster file:</p>
  
  <pre><code>angular.module('toaster', ['ngAnimate'])
  .service('toaster', ['$rootScope', function ($rootScope) {
  this.pop = function (type, title, body, timeout, bodyOutputType) {
      this.toast = {
          type: type,
          title: title,
          body: body,
          timeout: timeout,
          bodyOutputType: bodyOutputType
      };
      $rootScope.$broadcast('toaster-newToast');
  };
  </code></pre>
  
  <p>Scripts listing in order:</p>
  
  <pre><code>                    "~/Scripts/angular.js",
                      "~/Scripts/angular-resource.js", 
                      "~/Scripts/ui-bootstrap-tpls-0.10.0.js",
                      "~/Scripts/spin.js",
                      "~/Scritps/angular-animate.min.js",
                      "~/Scripts/toaster.js",
                      "~/Scripts/ApptSettingApp.js",
                      "~/Scripts/angular-spinner.js",
                      "~/Scripts/dataFactory.js",
  </code></pre>
  
  <h1>Update to this issue:</h1>
  
  <p>What I have found with this problem, I am using angular in a .net application and my scripts are all rendered using the bundler in my application. Even though the script file reference is the same, and the toaster reference is correct. If you add a  tag to the page, sourced to the same script files it will work fine. This however does not resolve the problem, it does give more insight into the cause.</p>