title: angular.js:13550 TypeError: Cannot read property 'compile' of undefined?
body: <p>The following Angular js code throws the error-</p>
  <blockquote>
  <p>&quot;angular.js:13550 TypeError: Cannot read property 'compile' of undefined&quot; for the code-</p>
  </blockquote>
  <p>HelloWorld.html</p>
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html ng-app=&quot;module1&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;My First Custom Directive&lt;/title&gt;
          &lt;script src=&quot;../angular.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;helloworldDirective.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;hello-world&gt;&lt;/hello-world&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>helloWorldDirective.js-</p>
  <pre><code>(function() {
      
      var module1=angular.module('module1',[]);
      module1.directive('helloWorld',function(){
          return
          {
              template:'Hello Somesh!!Keep it up.'
          };
          
      });
      
      
  }());
  </code></pre>
  <p>But when I replace the Javascript file with the following code it works:</p>
  <pre><code>(function() {
      
      var module1=angular.module('module1',[]);
      var helloWorld=function()
  {
  var directive={};     
  directive.template='Hello Somesh!!Keep it up.';
  return directive;
  }
  module1.directive('helloWorld',helloWorld);
      
  }());
  </code></pre>
  <p>Both codes are doing basically the same thing but one is failing. Any thoughts?</p>