Error: $compile:ctreq

Missing Required Controller

This error occurs when HTML compiler tries to process a directive that specifies the require option in a directive definition, but the required directive controller is not present on the current DOM element (or its ancestor element, if ^ was specified).

To resolve this error ensure that there is no typo in the required controller name and that the required directive controller is present on the current element.

If the required controller is expected to be on an ancestor element, make sure that you prefix the controller name in the require definition with ^.

If the required controller is optionally requested, use ? or ^? to specify that.

Example of a directive that requires ngModel controller:

myApp.directive('myDirective', function() {
  return {
    require: 'ngModel',
    ...
  }
}

This directive can then be used as:

<input ng-model="some.path" my-directive>

Example of a directive that optionally requires a form controller from an ancestor:

myApp.directive('myDirective', function() {
  return {
    require: '^?form',
    ...
  }
}

This directive can then be used as:

<form name="myForm">
  <div>
    <span my-directive></span>
  </div>
</form>