AngularJS - Navigating inside a directive/component

Question

I have a component (directive) which should be used as a stand alone component by other applications (bower component, for example). I want to add navigation inside my directive (using ngRoute or ui-router) - but this could conflict with the host application navigation (if it uses one).

For example:

• Main application has a routing for my component:

http://address.com/route-to-my-component

Now, inside my application I should have an inner route (I am not aware of the main application routing):

$routeProvider.
      when('/route1', {
        template: `<comp1></comp1>`
      }).
      when('/route2', {
        template: `<comp2></comp2>`
      }).
      otherwise({
        redirectTo: '/route1'
      });

There are several problems with this solution:

1. Main application might not recognise my routing, so it will fall to its default route.
2. I cannot know what is my parent router solution, which makes it hard for me to configure my own routes.

Is there a solution to this problem?

Thanks

EDIT

I ended up with two optional solutions:

1. Using angular-widget, which is a great solution but is too complex for my case (it will be an overkill for me)

2. Using history.pushState.

So, I implemented the second option, like this:

• When the use click the navigation (inside my component), I do pushState:

  history.pushState({someData}, 'some-title', url );

• And I added an event for user's pressing the back button:

  window.onpopstate = function(event) { //My back logic here }.bind(this);

It is kind of hackey solution but it was perfect to my situation and needs.