title: angular is not defined, why?
body: <p>The following angular piece doesn't work, it seems that in the immediately invoked function the code breaks where I create my module because angular syntax is not recognised.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyModule"&gt;
   &lt;head&gt;
      &lt;script data-require="angular.js@*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body ng-controller="MyCtrller"&gt;          
      &lt;h1&gt;Hello!&lt;/h1&gt;
      {{ cousin }}
    &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  (function() {
      var app = angular.module("MyModule", []);
      var MyCtrller = function($scope)          ///typo here in "MyCtrller"
      {
            $scope.cousin = "Karen";
      }
      app.controller("MyCtrller", ["$scope", MyCtrller]);
  }());
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect the result to be Karen.</p>
  
  <p>Instead, I see {{ cousin }} </p>
  
  <p>The error I get in console is: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: angular is not defined</p>
  </blockquote>
  
  <p>on the line where I create my module:</p>
  
  <p><code>var app = angular.module("MyModule", []);</code></p>