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

ok, friend , have been working on while , couldn't figure out bug is. basically, story want start list view of messages, , when click on 1 of messages go detail page. standard simple stuff.

so problem when click on message, url updates, controller isn't being called nor new template getting rendered. can see below in message-detail-controller.js, i'm logging message console isn't showing @ all. ok here's 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> 

solved. so, reasons don't understand, if want replace contents of ion tab template/controller, need refer parent view in router. observe:

.state('tab.message-detail', {   url: '/message-detail/:messageid',   views: {     'tab-messages': {       controller: 'messagedetailctrl',       templateurl: 'app/messaging/message-detail.html'     }   } }) 

so, instead of views: { 'tab-message-detail.... need views: { 'tab-messages'...