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 !!

Check this out : http://plnkr.co/edit/Wvb7melvMOgXh3FyoVnx?p=preview