title: Angularjs ui-routing problems
body: <p>I am working on SPA application using Angularjs and .NET web api, I am also using ui-route, and I have two problems there: 
    1. When I go to a traveldetail.html page, routing does go there but it doesn't attach the controller;
    2. "otherwise" goes to the page I want, but it doesn't change to url of that page and does't attach controller either, so page comes out blank:</p>
  
  <pre><code>var travelApp = angular.module("Travel", ["ui.router", 'ui.bootstrap']);
  
  travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
      $stateProvider
        .state('/', {
            url: '/',
            templateUrl: 'Partials/travellist.html',
            controller: 'TravelListController'
        })
        .state('travellist', {
            url: '/travellist',
            templateUrl: 'Partials/travellist.html',
            controller: 'TravelListController'
        })
        .state('traveldetail', {
            url: '/traveldetail/:travelId',
            templateUrl: 'Partials/traveldetail.html',
            controller: 'TravelDetailController'
        })
        .state('advancedsearch', {
            url: '/advancedsearch',
            templateUrl: 'Partials/advancedsearch.html',
            controller: function ($scope, $stateParams) {
                $scope.item = $stateParams.item;
            }
        })
        .state('creditcardmatcher', {
            url: '/creditcardmatcher',
            templateUrl: 'Partials/creditcardmatcher.html',
            controller: function ($scope, $stateParams) {
            $scope.item = $stateParams.item;
            }
        })
        .state('approvalgroups', {
            url: '/approvalgroups',
            templateUrl: 'Partials/approvalgroups.html',
            controller: function ($scope, $stateParams) {
                $scope.item = $stateParams.item;
            }
        })
        .state('help', {
            url: '/help',
            templateUrl: 'Partials/help.html',
            controller: function ($scope, $stateParams) {
                $scope.item = $stateParams.item;
            }
        })
        .state('otherwise', {
            url: '/travellist',
            templateUrl: 'Partials/travellist.html',
            controller: 'TravelListController'
        })
  }])
  </code></pre>
  
  <p>Please advise on what am I doing wrong.</p>
  
  <p>TRAVELDETAIL partial page:</p>
  
  <pre><code>&lt;h1&gt;Travel Request&lt;/h1&gt;
  &lt;center&gt;    
      &lt;table width="100%" cellpadding="0" cellspacing="0" ng-controller=""&gt;
          &lt;tr&gt;            
              &lt;td&gt;
                  &lt;table class="travelTabs"&gt;
                      &lt;tr ng-init="tab = 1"&gt;
                          &lt;td ng-class="{active:tab===1}"&gt;
                              &lt;a href ng-click="tab = 1"&gt;Itinerary - Step 1 &gt;&gt;&lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td ng-class="{active:tab===2}"&gt;
                              &lt;a href ng-click="tab = 2"&gt;Travel Info - Step 2 &gt;&gt;&lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td ng-class="{active:tab===3}"&gt;
                              &lt;a href ng-click="tab = 3"&gt;Trip Info - Step 3 &gt;&gt;&lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td ng-class="{active:tab===4}"&gt;
                              &lt;a href ng-click="tab = 4"&gt;Estimates - Step 4 &gt;&gt;&lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td ng-class="{active:tab===5}"&gt;
                              &lt;a href ng-click="tab = 5"&gt;Comments - Completion&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="border:solid 2px red"&gt;
              &lt;td&gt;
                  &lt;p ng-show="tab === 1"&gt;
                      Paragraph 1
  
                  &lt;/p&gt;
                  &lt;p ng-show="tab === 2"&gt;               
                      Paragraph 2
                  &lt;/p&gt;
                  &lt;p ng-show="tab === 3"&gt;
                      Paragraph 3
                  &lt;/p&gt;
                  &lt;p ng-show="tab === 4"&gt; 
                      Paragraph 4
                  &lt;/p&gt;
                  &lt;p ng-show="tab === 5"&gt;
                      Paragraph 5
                  &lt;/p&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>TravelDetailController:</p>
  
  <pre><code>travelApp.controller('TravelDetailController', function ($scope, $http, $routeParams) {
      $scope.itineraries = [];
      $http.get('api/travel/gettravel/' + $routeParams.travelId).success(function (data) {
          $scope.travel = data;
          $scope.tripType = 2;
          $scope.addItinerary();
      }).error(function () {
          alert('Error reading JSON file.');
      });
  
      $scope.setMultiCity = function () {
          $scope.addItinerary();
          $scope.addItinerary();
      }
  
      $scope.setNonMultiCity = function () {
          if ($scope.itineraries.length &gt; 1) {
              $scope.itineraries.splice(1, $scope.itineraries.length - 1);
          }
      };
  
      $scope.addItinerary = function () {
          $scope.itineraries.push({
              itinerary: {
                  From: '',
                  To: '',
                  DapartDate: '',
                  DapartTime: '',
                  ReturnDate: '',
                  ReturnTime: '',
                  Business: true
              }
          });
          if ($scope.itineraries.length &gt; 1) {
              scope.itineraries[0].itinerary.ReturnDate = "";
              if ($scope.tripType &lt; 3) {
                  $scope.tripType = 3;
              }
          }
      };
  
      $scope.deleteItinerary = function (index) {
  
          $scope.itineraries.splice(index, 1);
          if ($scope.itineraries.length &lt; 2) {
              $scope.tripType = 1;
          }
      };
  
  });
  </code></pre>