Angular UI Router multiple states with same URL?

Is there a way to have two different states (or more) on same URL using Angular ui-router?

The answer is yes!

So, if you want to have multiple views for same URL to show different content in different sections of your home page, here is how to do it.

Let's say we want to have one view in content area and the other in sidebar area.To make this happen we will use named views feature

Inside of your HTML file you will have to set these two views:

<div ui-view="content" ></div>
<div ui-view="sidebar" ></div>

And now we can use ui-router feature called "Multiple named views" as described here. So in our state provider we will set two views for same URL like this:

$stateProvider
    .state( 'content', {
      url: '/',
      ....// other state provider settings
      views: {
          "'content':{
            controller: 'ContentCtrl',
            templateUrl: 'templates/content.html'
          },
          'sidebar': {
            controller: 'SidebarCtrl',
            templateUrl: 'templates/sidebar.html'
          }
        }

As you can see now each view has its own controller which can be used to manipulate data inside the corresponding view.