Loading view in ionicframework based on json data using angularjs

I am developing single page android application using ionicframework and phonegap.I want list messages in one view (like list item),when each list item is clicked another view is loaded for display details of message using json.here is my direcive js file

 //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');
    },

  }
})  

message is listed properly ,but how can i display the details of message in another view?. Here is the screen shot i expected.enter image description here