title: How to make tabs in angularJS have separate controllers?
body: <p>Right now i am using routeProvider to change between views which works awesome. But now i want to create a view which contains 4 different tabs which should contain 4 different controllers. ive read here that it could be done with stateProvider: </p>
  
  <p><a href="https://stackoverflow.com/questions/21017456/angular-ui-tab-with-seperate-controllers-for-each-tab">Angular ui tab with seperate controllers for each tab</a></p>
  
  <p>here is my code: </p>
  
  <pre><code>var WorkerApp = angular.module("WorkerApp", ["ngRoute", 'ngCookies', "ui.bootstrap", "ngGrid", 'ngAnimate', 'ui.router']).config(function ($routeProvider, $stateProvider) {
      $routeProvider.
          when('/login', {
              templateUrl: 'Home/Template/login', resolve: LoginCtrl.resolve
          })
          .when('/register', { templateUrl: 'Home/Template/register', resolve: RegisterCtrl.resolve  })
          .when('/', { templateUrl: 'Home/Template/main', resolve: MainCtrl.resolve })
          .when('/profile', { templateUrl: 'Home/Template/profile', controller: "ProfileController" })
          .when('/contact', { templateUrl: 'Home/Template/contact', controller: "ContactController" })
  
  
      $stateProvider.state('tabs', {
          abstract: true,
          url: '/profile',
          views: {
              "tabs": {
                  controller: "ProfileController",
                  templateUrl: 'Home/Template/profile'
              }
          }
      }).state('tabs.tab1', {
          url: '/profile',  //make this the default tab
            views: {
                "tabContent": {
                    controller: "ProfileController",
                    templateUrl: 'Home/Template/profile'
                }
            }
        })
        .state('tabs.tab2', {
            url: '/tab2',
            views: {
                "tabContent": {
                    controller: 'Tab2Ctrl',
                    templateUrl: 'tab2.html'
                }
            }
        });
  
  
  });
  </code></pre>
  
  <p>but i cant get it really to work because default of routeprovider is set to send over to work because my routeprovider is sending over to "/" on default, which makes "/tabs" invalid. so i cant actully figure out if it is possible to switch to states on specific url. Or change state on specific URL in routeProvider?</p>