title: Angular failed to instantiate module on initial page load
body: <p>I have an Angular module that for whatever reason will not instantiate on the initial page load, and sometimes randomly on refresh.  Just to let you know angular.js is not being loaded inside the <code>&lt;head&gt;</code> tags since I do not have control of that so I have to call the script inside the body (the code is basically put inside a CMS template).</p>
  
  <p>This is what the code currently looks like, I put the actual script in a <code>&lt;script&gt;</code> tag to remove the possibility that maybe the js file with the module in it wasn't being loaded for whatever reason.</p>
  
  <pre><code>&lt;script src="/bizcontent/minuteclinic/desktop/general/angular.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var app = angular.module('exampleApp', []);
    app.controller('MainCtrl', function($scope) {
      $scope.field = {
        value: null
      };
      $scope.field2 = {
        value2: null
      };
      $scope.field3 = {
        value3: null
      };
      $scope.field4 = {
        value4: null
      };
      $scope.field5 = {
        value5: null
      };
      $scope.field6 = {
        value6: null
      };
      $scope.field7 = {
        value7: null
      };
      $scope.field8 = {
        value8: null
      };
      $scope.field9 = {
        value9: null
      };
      $scope.field10 = {
        value10: null
      };
  
      $scope.question = {
        answers: [
          {title: "A (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "B (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers2: [
          {title: "C (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "D (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers3: [
          {title: "E (correct)",   correct: true, answer: "This is the incorrect answer"},
          {title: "F (incorrect)", correct: false, answer: "Pollen is #1"}
        ],
        answers4: [
          {title: "G (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "H (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers5: [
          {title: "I (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "J (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers6: [
          {title: "I (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "J (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers7: [
          {title: "I (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "J (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers8: [
          {title: "I (correct)",   correct: true, answer: "This is the incorrect answer"},
          {title: "J (incorrect)", correct: false, answer: "Yes, they are."}
        ],
        answers9: [
          {title: "I (correct)",   correct: true, answer: "This is the correct answer"},
          {title: "J (incorrect)", correct: false, answer: "This is the incorrect answer"}
        ],
        answers10: [
          {title: "I (correct)",   correct: true, answer: "This is the incorrect answer"},
          {title: "J (incorrect)", correct: false, answer: "Hay fever sufferers should know the pollen count forcast before planning any outdoor activities."}
        ]
      };
      $scope.select = function(field, answer) {
        if (answer.checked) {
          field.value = answer.answer;
          field.value_correct = answer.correct
        } else {
          field.value = null;
        }
      };
  
      $scope.updateSelection = function(position, entities) {
        angular.forEach(entities, function(answer, index) {
          if (position != index) 
            answer.checked = false;
        });
      }
  
    });
  &lt;/script&gt;
  &lt;div ng-app="exampleApp"&gt;
  </code></pre>
  
  <p>At the end you will see where the app is being called (I am fairly new to Angular so if I'm using the incorrect terminology I apologize in advance).</p>
  
  <p>When the module does not work correctly I get the Error: $injector:nomod
  Module Unavailable error with the following...</p>
  
  <p>Module 'exampleApp' 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.</p>