[SOLVED] How to use directive that sits in a different module

angular.module('mod1', [])
  .directive('myDir', ($timeout) => {
    return {
      ///....
    }
  });

angular.module('myApp', ['mod1'])

<html ng-app="myApp">

<body>
  <my-dir valu='blablabla' />
</body>

</html>

So why this wouldn't work? and say Unknown provider: $compileProvider,

but if I move directive into myApp module it works

I think it should work fine as long as module dependency has been provided correctly !!