Загрузка представления в ионной структуре на основе данных JSON с помощью angularjs

Я разрабатываю одностраничное приложение для Android с использованием ionicframework и phonegap. Я хочу получать сообщения списка в одном представлении (например, элемент списка), при щелчке по каждому элементу списка загружается другое представление для отображения сведений о сообщении с использованием json.

 //load the list of messages
.state('app.announcements', {
url: "/announcements",
views: {
'menuContent' :{
templateUrl: "templates/announcements.html",
controller:'announcementCtrl'
}
}
})
//display each message in detail based itemId
.state('app.announcementsitem', {
url: "/announcementsitem/:itemId",
views: {
'menuContent' :{
templateUrl: "templates/announcementsitem.html",
controller:'announcementdetailCtrl'
}
}
})
controller.js

.controller('announcementCtrl', function($scope,$ionicPopup,Announcement) {
readAnnouncements();
function readAnnouncements(){

//call the services
Announcement.getannouncement().then(function(msg){
console.log("From server"+msg.data);
//get the json data
$scope.items=msg.data;

});}

})
.controller('announcementdetailCtrl',function($scope,$stateParams,Announcement){
//read the each item id from messgae list,i need dispaly the message details based on this id
var id=$stateParams.itemId;});
services file
.factory('Announcement', function($http) {
return {
getannouncement: function() {
return  $http.get('http://localhost/gksfapp/gksfapp_backend.php?action=an');
},

}
})

сообщение отображается правильно, но как я могу отобразить детали сообщения в другом представлении ?.
Вот скриншот, который я ожидал.