title: Load AngularJS using jQuery
body: <p>I am attempting to load AngularJS to a page using jQuery. The reason for that is that I have a site that was build using jQuery but I want to take advantage of some of the amazingness of AngularJS to a particular page. So I did this. </p>
  
  <pre><code>jQuery(document).ready(function(jQ){
      jQ.getScript( "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js", function( data, textStatus, jqxhr ){
  
          var app = angular.module('app',[]).controller('pageController', function($scope) {
  
              console.log('Hello');
              $scope.data = 'success!';
          });
      });
  });
  </code></pre>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;html&gt;
  ..
  &lt;body&gt;
  ...
  &lt;div ngApp="app"&gt;
      &lt;div ngController="pageController"&gt;
         {{data}}
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There are two problems.</p>
  
  <ol>
  <li>If I use "ng-app" instead of "ngApp", AngularJS throws an error saying </li>
  </ol>
  
  <blockquote>
    <p>Module 'app' 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>
  </blockquote>
  
  <ol start="2">
  <li>I can see <strong>app</strong> and <strong>pageController</strong> are both loaded correctly, but <strong>{{data}}</strong> in html is not rendered and <strong>console.log('Hello');</strong> didn't get executed as well. </li>
  </ol>
  
  <p>Scratching my for hours now. Any help is appreciated. </p>