title: Module 'MyApp' is not available
body: <p>I am using angular in my mvc project.</p>
  
  <p>I have added the following js file and called it MyApp.js</p>
  
  <pre><code> (function () {
  //Create a Module 
  var MyApp = angular.module('MyApp', ['ngRoute']);  // Will use ['ng-Route'] when we will implement routing
  
   })();
  </code></pre>
  
  <p>On my _Layout.cshtml I have added ng-app to the body tag</p>
  
  <pre><code>&lt;body ng-app="MyApp"&gt;
          .....
          Code
          .....
  &lt;/body&gt;
  </code></pre>
  
  <p>On the view I want to display the angular object I have added:</p>
  
  <pre><code>  @Scripts.Render("~/bundles/angular")
  
    &lt;script src="../../Scripts/MyApp.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/AngularController/BudgetAndDetails.js" type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
    $(function () {
        $('body').on('click', '.CX span', function () {
            //When Click On + sign
            if ($(this).text() == '+') {
                $(this).text('-');
            }
            else {
                $(this).text('+');
            }
            $(this).closest('tr') // row of + sign
              .next('tr') // next row of + sign
              .toggle(); // if show then hide else show
  
        });
      });
    &lt;/script&gt;
   &lt;div ng-controller="BudgetAndDetails"&gt;
    &lt;table class="tableData" border="0" cellspacing="0" cellpadding="0"&gt;
       &lt;thead&gt;
           &lt;tr&gt;
             &lt;th&gt;&lt;/th&gt;
             &lt;th&gt;Budget Name&lt;/th&gt;
             &lt;th&gt;Year&lt;/th&gt;
             &lt;th&gt;Month&lt;/th&gt;
  
         &lt;/tr&gt;
     &lt;/thead&gt;
      &lt;tbody ng-repeat="O in budgetdetails"&gt;
          &lt;tr ng-class-even="'even'" ng-class-odd="'odd'"&gt;
              &lt;td class="CX"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;{{O.budget.BudgetName}}&lt;/td&gt;
              &lt;td&gt;{{O.budget.Year}}&lt;/td&gt;
              &lt;td&gt;{{O.budget.monthname.MonthName1}}&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr class="sub"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td colspan="5"&gt;
                  &lt;table class="tableData" border="0" cellspacing="0" cellpadding="0"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Category&lt;/th&gt;
                          &lt;th&gt;Subcateogry&lt;/th&gt;
                          &lt;th&gt;Amount&lt;/th&gt;
  
                      &lt;/tr&gt;
                      &lt;tr ng-repeat="a in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'"&gt;
                          &lt;td&gt;{{a.category.CategoryName}}&lt;/td&gt;
                          &lt;td&gt;{{a.subcategory.SubCategoryName}}&lt;/td&gt;
                          &lt;td&gt;{{a.Amount}&lt;/td&gt;
  
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my bundles I added the following code:</p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                      "~/Scripts/angular.js",
                       "~/Scripts/angular-route.js"));
  </code></pre>
  
  <p>However every time i run the program I get the error</p>
  
  <blockquote>
    <p>Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    <a href="http://errors.angularjs.org/1.5.3/" rel="nofollow">http://errors.angularjs.org/1.5.3/</a>$injector/nomod?p0=MyApp</p>
  </blockquote>
  
  <p>I know I an not misspelling it I read it could be an issue with the order of my scripts. I have tried several alternatives but can't find the problem.</p>
  
  <p>Could someone help me? </p>