dynamic view loading in custom directives' wid

问题:

I am using custom Directive's approach in AngularJS for making dashboard with widgets and for widgets m using angular-gridster (https://github.com/ManifestWebDesign/angular-gridster).

Requirements:

On right side menu created by custom directive is present.and for routing purpose UI Router in used.

1-I need to open a dashboard firstly empty.

2-when click to Menu1 one widget is opened with data from state menu1 and same for Menu2

3-when 2nd option is clicked another widget added to dashboard without affecting previously opened one and so on.

4-all the widgets have independent data.and navigation in each widget is according to the respective menu.

WorkFlow:

1-empty dashboard is opened via custom directive.

2-widgets are added by providing click event to menu1 and menu2.which will broadcast event.and against that click event a widget is added to widgets array holding information about that widget.

Problem:

problem is routing basically.till now there is no routing involved.info is passed by broadcasting a click event.and by this i have achieved this coloured area.

but the further navigation creates problem.when a state changes by clicking Menu1 or Menu2 it affects both the widgets and and ui-view portion in both widgets show same data.if Menu1 is clicked both widgets show data from Menu1 and vice versa.

Now.i have tried enough solutions but here i want an idea from ui router experts or custom directives' experts.cz i hv tried many possible ways and stuck here for almost a week.

Thanx very very much if anyone can help.