Yes. Third option is the best solution. First option will definitely give a pain in the neck. Second option adds a dependency of module X in the main app, which is not desirable. You would want your module to be self-contained. So third option is the best solution.
Here is the best practice recommendations from Google which you are actually trying to adhere to. :) Moreover, it will also be great for you (as suggested by Google's best practice) to not separate the files by artifacts, which means you do not need controllers, directives, etc dir structure as below. Also note partials, CSS and even tests are in the component are contained in the component/module directory. Hence the module is totally contained and independent, which helps in reusability:
sampleapp/
app.css
app.js
app-controller.js
app-controller_test.js
components/
bar/ "bar" describes what the service does
bar.js
bar-service.js
bar-service_test.js
bar-partial.html
foo/ "foo" describes what the directive does
foo.js
foo-directive.js
foo-directive_test.js
foo-partial.html
index.html
I hope this will be helpful.