These are just general advices.
How should I design my app and widgets - should i have a separate AngularJS module or each widget should be a directive to the main module?
You're talking hundres of widgets, it seems natural to split them into several modules. Some widgets might have more in common than other widgets. Some might be very general and fit in other projects, others are more specific.
If I design my widget as directives, is there a way to define dependency within a directive. I.e. to say that my directive uses ng-calender in its implementation?
Dependencies to other modules are done on a module level, but there is no problem if module A depends on module B and both A and B depends on module C. Directives are a natural choice for creating widgets in Angular. If a directive depends on another directive you either define them in the same module, or create the dependency on a modular level.
If I design each widget as a separate module, is there a way to dynamically add the widget module as a dependency to the main module?
I'm not sure why you would want to do this, and I'm not sure how to do it. Directives and services are not initialized before they get used in Angular. If you have a huge library of directives (widgets) and know that you'll probably use some of them, but not all of them - but you don't know which ones will get used when the application gets initialized you can actually "lazy load" your directives after your module has been loaded. I've created an example here
The benefit is that you can get your application to load fast even if you have lots of code, because you don't have to load the scripts before you need them. The disadvantage is that there can be a considerably delay the first time a new directive is loaded.
How should I design the controllers - one controller per widget probably?
A widget will probably need its own controller. Controllers should generally be small, if they get big you can consider if there's any functionality that would fit better in a service.
How should i separate the state (scope) if i have multiple widgets from the same type in the view?
Widgets that need scope variables should without doubt have their own isolated scopes (scope:{ ... } in the directive configuration).
Are there bestpractices for designing reusable widgets with AngularJS?
Isolate the scope, keep the dependencies to a necessary minimum.See Misko's video about best practices in Angular
Brian Ford has also written an article about writing a huge application in Angular
