ion-item onclick show deteil info in another div

I am now trying to use ionic to build my website. I have constructed my ion-list with ion-item ng-repeat to fetch the data array from my JavaScript file. And I would like to make it clickable and the item's detail information can be shown on the right side of my webpage. When items are not clicked, the right side should be blank. Please refer to the following illustration:

I have found an example similar to what I want to do, but I would like to make them in a same page. Any suggestion or directions? thanks!!

example credits to Krishna Gopinath: http://jsfiddle.net/hungerpain/52Haa/

<div data-role="content">
    <ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
        <li data-role="list-divider" data-theme="b" role="heading">Names</li>
    </ul>
</div>

ion-list by default occupies the full width in mobile view. So, you need to replace the defaults but changing defaults is not a good solution. Either you need to create your own named views by angular or you need to follow ionic defaults, that is your wish. If you wish to do as your requirement in the question, create two div elements in the view side by side.

<body>
 <div ui-view="list">
   <ion-list>
     <ion-item></ion-item>
   </ion-list>
 </div>
 <div ui-view="details"></div>
</body>

So, in list view, display your list and hide the details view by default. When you click on the list item show details view. May be this is good for browsers.

You need to use angular's ui-router to configuring states. Set same state for clicking on list-item. Changing the default behavior leads to spent more time. Mobile size configuration are not good for this. You also can do this by ionic side navigation menu if you are interested