title: AngularJS: Error: No controller: form
body: <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="my-app" ng-controller="AppController"&gt;
      &lt;ng-form name="myform"&gt;
          &lt;gtux-el&gt;&lt;/gtux-el&gt;
      &lt;/ng-form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('my-app', [], function () {
  })
  
  app.controller('AppController', function ($scope) {
  })
  
  app.directive('gtInputMsg', ['$compile', '$interpolate', '$log', function($compile, $interpolate, $log) {
      function link($scope, element, attrs, ctrls) {
          var modelCtrl = ctrls[0], formCtrl = ctrls[1], msgCtrl = ctrls[2];
  
          element.on('click', function() {
              console.log('gt-input-msg:click', element)
          });
      };
  
      return {
          require : ['ngModel', '^form', 'gtInputMsg'],
          link : link
      };
  }]);
  
  app.directive('gtuxTextfield', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
      return {
          restrict : 'E',
          template : '&lt;input type="text" name="field" gt-input-msg ng-model="fieldvalue" /&gt;',
          replace : true
      };
  }]);
  
  app.directive('gtuxEl', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
      function link($scope, $element, attrs, ctrl) {
          //here compile is used because in my use case different elements are used based on some option values. A service provides the template to be used based on a key
          var $cr = $compile('&lt;gtux-textfield&gt;&lt;/gtux-textfield&gt;')($scope);
          $($cr).appendTo($element);
      }
  
      return {
          restrict : 'E',
          link : link,
          transclude : true
      };
  }]);
  </code></pre>
  
  <p>Error</p>
  
  <pre><code>Error: No controller: form
      at Error (&lt;anonymous&gt;)
      at getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4278:19)
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4284:24
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/arunpjohny/gphNH/11/" rel="nofollow">Fiddle</a></p>
  
  <p>As far I can see there is a <code>ng-form</code> element at the top of the hierarchy which should provide the from controller to the <code>gtInputMsg</code> directive.</p>
  
  <p>How can this be rectified?</p>