title: Adding directive makes controller undefined in angular js code
body: <p>Here is my angular js app with html code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript"&gt;
          angular.module("demo", []).controller('DemoController', function ($scope) {
              $scope.user = {
                  dateOfBirth: new Date(1970, 0, 1)
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="demo" ng-controller="DemoController"&gt;
          Date Of Birth:
          &lt;my-datepicker type="text" ng-model="user.dateOfBirth" /&gt;
          &lt;br /&gt;
          Current user's date of birth: &lt;span id="dateOfBirthDisplay"&gt;{{user.dateOfBirth}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works fine.But the moment i add a directive to it, it shows error</p>
  
  <pre><code>Error: Argument 'DemoController' is not a function, got undefined
  </code></pre>
  
  <p>Here is the full code with directive</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript"&gt;
          angular.module("demo", []).controller('DemoController', function ($scope) {
              $scope.user = {
                  dateOfBirth: new Date(1970, 0, 1)
              }
          });
          angular.module("demo", []).directive('myDatepicker', function ($parse) {
              return {
                  restrict: "E",
                  replace: true,
                  transclude: false,
                  compile: function (element, attrs) {
                      var modelAccessor = $parse(attrs.ngModel);
  
                      var html = "&lt;input type='text' id='" + attrs.id + "' &gt;" +
              "&lt;/input&gt;";
  
                      var newElem = $(html);
                      element.replaceWith(newElem);
  
                      return function (scope, element, attrs, controller) {
  
                          var processChange = function () {
                              var date = new Date(element.datepicker("getDate"));
  
                              scope.$apply(function (scope) {
                                  // Change bound variable
                                  modelAccessor.assign(scope, date);
                              });
                          };
  
                          element.datepicker({
                              inline: true,
                              onClose: processChange,
                              onSelect: processChange
                          });
  
                          scope.$watch(modelAccessor, function (val) {
                              var date = new Date(val);
                              element.datepicker("setDate", date);
                          });
  
                      };
  
                  }
              };
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="demo" ng-controller="DemoController"&gt;
          Date Of Birth:
          &lt;my-datepicker type="text" ng-model="user.dateOfBirth" /&gt;
          &lt;br /&gt;
          Current user's date of birth: &lt;span id="dateOfBirthDisplay"&gt;{{user.dateOfBirth}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i'm following the tutorial from this link <a href="http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html" rel="nofollow">http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html</a></p>