Angular/Ionic Link Updates URL, but controller and template not being called

Ok, so my friend and I have been working on this for a while and just couldn't figure out what the bug is. Basically, the story is we want to start with a list view of messages, and when you click on one of the messages you go to a detail page. Fairly standard simple stuff.

So the problem is that when you click on a message, the url updates, but the controller isn't being called nor is a new template getting rendered. As you can see below in message-detail-controller.js, I'm logging a message to the console that isn't showing up at all. Ok here's some code:

app.js

angular.module('exampleApp', ['ionic', 'ui.router'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.views.maxCache(0);

  $stateProvider

  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'app/tabs/tabs.html',
    controller: 'TabsCtrl'
  })

  .state('tab.messages', {
    url: '/messages',
    views: {
      'tab-messages': {
        templateUrl: 'app/messaging/messages.html',
        controller: 'MessagesCtrl'
      }
    }
  })

  .state('tab.message-detail', {
    url: '/message-detail/:messageId',
    views: {
      'tab-message-detail': {
        controller: 'MessageDetailCtrl',
        templateUrl: 'app/messaging/message-detail.html'
      }
    }
  })
});

messages-controller.js

angular.module('exampleApp').controller('MessagesCtrl', MessagesCtrl);

function MessagesCtrl($http, $scope, $state, BACKEND_URL, Auth) {
  var url = BACKEND_URL + '/messages';

  $http.get(url)
    .success(function (data, status, headers, config) {
      $scope.messages = data.messages;
    })
    .error(function (data, status, headers, config) {
      console.log('Something went wrong.');
    });
}

messages.html

<ion-view view-title="Messages">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right"
      ng-repeat="message in lastMessages" type="item-text-wrap"
      ui-sref="tab.message-detail({messageId: message.id})">
        <img ng-src="{{ message.face }}">
        <h2>{{message.name}}</h2>
        <p>{{message.content}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

message-detail-controller.js

  angular.module('exampleApp').controller('MessageDetailCtrl', MessageDetailCtrl);

  function MessageDetailCtrl() {
    console.log("I got called");
  }

message-detail.html

<ion-view view-title="Message Detail">
  <ion-content>
    <h1>THIS WORKS?</h1>
  </ion-content>
</ion-view>