Second AngularJS directive not loading from html attribute

Question

I have this directive which avoids an input to be marked as $pristine:

(function () {
  'use strict';
  angular
      .module('blocks.noDirtyCheck', [])
      .directive('noDirtyCheck', function() {
        // Interacting with input elements having this directive won't cause the
        // form to be marked dirty.
        return {
          restrict: 'A',
          //require: 'ngModel',
          link: function(scope, elm, attrs, ctrl) {
            ctrl.$pristine = false;
          }
        };
      });
})();

and this other one, which defines a custom widget, <workflow-input>:

(function () {
  'use strict';

  angular
    .module('app.widgets')
    .directive('workflowInput', workflowInput)
    .controller('WorkflowInputController', WorkflowInputController);

  /* @ngInject */
  function workflowInput() {
    return {
      restrict: 'E',
      scope: {
        selectedWorkflow: '=ngModel'
      },
      controller: WorkflowInputController,
      controllerAs: 'vm',
      templateUrl: '/client/app/widgets/workflowInput.html'
    };
  }
...
})();

I want to use it as this:

<workflow-input ng-model="vm.asset.workflows" no-dirty-check></workflow-input>

I understand that the noDirtyCheck directive is incomplete, since it's not being applied directly on the actual <input> and it needs to be fixed, but that's not the issue at hand, the problem is that the noDirtyCheck directive is never being called. I put a breakpoint on the workflowInput controller and I can see the directive is not listed in the element's controllerDirectives in nodeLinkFn (in angular's codebase). There's only ngModel and workflowInput there.

Anyone knows why this might be happening? Thank you

Answer 1

I forgot injecting the module into the application. Thank you @Lex