title: Same html page for different tabs in Angular UI Router
body: <p>My angular app is routed as following:</p>
  
  <pre><code>$stateProvider
  
    // setup an abstract state for the tabs directive
    .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })
  
    // Each tab has its own nav history stack:
  
    .state('tab.dotnet', {
        url: '/dotnet',
        views: {
            'tab-dotnet': {
                templateUrl: 'templates/tab-dotnet.html',
                controller: 'QuestionsCtrl'
            }
        }
    })
  
    .state('tab.sql', {
        url: '/sql',
        views: {
            'tab-sql': {
                templateUrl: 'templates/tab-sql.html',
                controller: 'QuestionsCtrl'
            }
        }
    })
  </code></pre>
  
  <p>The above two routes use the same controller but different html pages.
  Since both the pages are same, I want to have a single html page in my application instead of two different tab-sql and tab-dotnet pages.
  But I will need a differentiation variable to be injected to the controller when selecting the tabs.
  Basically I need something like this:</p>
  
  <pre><code>  .state('tab.dotnet', {
        url: '/dotnet',
        views: {
            'tab-dotnet': {
                templateUrl: 'templates/tab.html',
                controller: 'QuestionsCtrl',
                type: 'dotnet' // so that i get this type in my Controller
            }
        }
    })
  
    .state('tab.sql', {
        url: '/sql',
        views: {
            'tab-sql': {
                templateUrl: 'templates/tab.html',
                controller: 'QuestionsCtrl',
                type: 'sql'
            }
        }
    })
  </code></pre>
  
  <p>How to achieve this?</p>