title: ui-router issue in ionic framework calling views
body: <p>I have an app in ionic framework using the tabs example for the most part. However in one of the views, I want the user to be able to click an item and go into another view based on that item. </p>
  
  <p>However, whenever you click on an item, it loads the correct view, but doesn't call the template file for that view. </p>
  
  <p>Here's what I have in my router (note non-relevant sections are left out)</p>
  
  <pre><code>$stateProvider.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  }).state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'LoginController'
      }
    }
  }).state('tab.friend-detail', {
    url: '/friend/:friendId',
    views: {
      'tab-friends': {
        templateUrl: 'templates/friend-detail.html',
        controller: 'FriendDetailCtrl'
      }
    }
  }).state('tab.buy', {
    url: '/buy',
    views: {
      'tab-buy': {
        templateUrl: 'templates/buy.html', 
        controller: 'PaymentController'
      }
    }
  }).state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountController'
      }
    }
  }).state('tab.order', {
    url: '/account/order/:id', 
    views: {
      'tab-order': {
        templateUrl: 'templates/order-view.html', 
        controller: 'OrderController'
      }
    }
  })
  </code></pre>
  
  <p>$urlRouterProvider.otherwise('/tab/dash');</p>
  
  <p>In my controller I have:</p>
  
  <pre><code>$scope.viewOrder = function(id) {   
      $state.go('tab.order', {id:id});
  };
  </code></pre>
  
  <p>In templates/tab-account.html I have:</p>
  
  <pre><code>&lt;ion-view title="Account"&gt;
  &lt;ion-content class="has-header padding"&gt;
  &lt;h1&gt;Account&lt;/h1&gt;
  
  &lt;h2&gt;Your orders&lt;/h2&gt;
  
  &lt;div class="card" ng-repeat="booking in bookings"&gt;
    &lt;div class="item item-text-wrap"&gt;
      &lt;b&gt;&lt;a ng-click="viewOrder(booking.id)"&gt;{{ booking.carpark.city }}&lt;/a&gt;&lt;/b&gt; on &lt;b&gt;{{ booking.date | date:'dd.mm.yyyy' }}&lt;/b&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
   </p>
  
  <p>Then the item specific view is as followed:</p>
  
  <pre><code>&lt;ion-view title="Order"&gt;
    &lt;ion-content class="has-header padding"&gt;
        &lt;h1&gt;Your Order&lt;/h1&gt;
        &lt;p&gt;Test&lt;/p&gt;
        Order #: {{orderNumber}}
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>That last view basically doesn't appear, even though the url changes from <code>tab/account</code> to <code>/tab/account/order/1</code></p>
  
  <p>I've asked a few StackOverflow questions regarding ionic recently, apologies if people keep coming across them and quite rightly think I'm an idiot :/ </p>
  
  <p>Thanks in advance! </p>