title: Failed to instantiate module MyApp
body: <p>I am loading Angularjs dynamically using RequireJS, and although the app initially loads, it produces this <a href="http://docs.angularjs.org/error/%24injector/modulerr?p0=MyApp&amp;p1=Error%3a%20%5B%24injector%3anomod%5D%20http://errors.angularjs.org/1.2.4/%24injector/nomod?p0=MyApp%0A%20%20%20%20at%20Error%20%28%3Canonymous%3E%29%0A%20%20%20%20at%20http://127.0.0.1:7000/js/angular/angular.min.js:6:449%0A%20%20%20%20at%20http://127.0.0.1:7000/js/angular/angular.min.js:20:152%0A%20%20%20%20at%20http://127.0.0.1:7000/js/angular/angular.min.js:21:158%0A%20%20%20%20at%20http://127.0.0.1:7000/js/angular/angular.min.js:28:487%0A%20%20%20%20at%20Array.forEach%20%28native%29%0A%20%20%20%20at%20q%20%28http://127.0.0.1:7000/js/angular/angular.min.js:7:255%29%0A%20%20%20%20at%20e%20%28http://127.0.0.1:7000/js/angular/angular.min.js:28:427%29%0A%20%20%20%20at%20Yb%20%28http://127.0.0.1:7000/js/angular/angular.min.js:32:462%29%0A%20%20%20%20at%20Xb.c%20%28http://127.0.0.1:7000/js/angular/angular.min.js:17:315" rel="nofollow">error</a> in the console. I've tried changing how I'm defining and the order in which I'm loading my app and angular, but I still get the same error. </p>
  
  <p>I have found similar questions on here, but nothing has solved my problem. Any help will be appreciated. Here is my require js files as well as my angular app definition:</p>
  
  <p>(main.js)</p>
  
  <pre><code>require.config({
      paths: {
          angular: '../js/angular/angular.min',
          jquery: '../js/lib/jquery-1.11.0.min',
          app: '../js/app',
          nvd3: '../js/nvd3/nv.d3.min',
          d3: '../js/d3/d3.min',      
      },
      shim: {
          angular: {
              deps: ['jquery'],
              exports: 'angular'
          },        
          nvd3: {
              exports: 'nv',
              deps: ['d3']
          },
          d3: { exports: 'd3'},     
      }
  });
  </code></pre>
  
  <p>(loadAngular.js)</p>
  
  <pre><code>require([
        'angular',
        'app',
        'services/services',
        'controllers/controllers',
        'directives/directives',
        'd3',
        'nvd3',
  
      ], function(angular) {
  //        angular.bootstrap(document, ['MyApp']);
      });
  </code></pre>
  
  <p>(app.js)</p>
  
  <pre><code>require(["angular"], function (angular) {
      'use strict';
  
      // create the angular app
      var app = angular.module('MyApp', ['MyApp.directives'
      ]);
  
      app.factory('socket', function () {
          var socket = io.connect('http://localhost:7000');
          return socket;
  
      });
  
      // setup dependency injection
      angular.module('d3', []);
      angular.module('MyApp.directives', ['d3']);
  
      angular.bootstrap(document, ['MyApp']);
  
  });
  </code></pre>
  
  <p>UPDATE:
  I think I've discovered where the error is being thrown from. I have the main.js file in a script tag in my base.html file, I am then loading the actual content views (with the angular stuff in) into a div using a jquery .load() call. Each of the fragment html files have the loadAngular.js included.</p>
  
  <p>The error is thrown from inside the dynamically loaded view (ng-app='MyApp'):</p>
  
  <pre><code>&lt;div id='trans' ng-app='MyApp' ng-controller='TransController'&gt;
  </code></pre>
  
  <p>This makes me think that I'm not using RequireJS to properly load angular onto the page? Can anyone see any mistakes in the files?</p>