How to use .factory as in tabs examples given by ionic

Hi,
I saw in the ionic tabs example, in the chats tab, when you click the name of a person, another page will open.
I made a page like this

My controller.js
.controller(‘MyCtrl’, function($scope){

$scope.items=
[{
id:0,
name: ‘a’,
shop: ‘aaaaa’,
price: ‘$10800.00’,
img1:‘img/4.png’,
img2:‘img/7.png’,
i:‘#/lol’},

{
id:1,
name: b',
shop:'bbbbb',
price: '$10800.00',  
img1:'img/4.png',
img2:'img/7.png',
i:'#/head'}];

});

My tab-dashboard


          <a class="button button-bar"
          ng-repeat="item in items" 
          href="{{item.i}}" id="div1">

          

    <img ng-src="{{item.img1}}" id="img1">
                <div class="b">           
                  <p class="name">{{item.name}}</p>
                  <p class="price">{{item.price}}</p>
                  <p class="p"><span>
                    <img ng-src="{{item.img2}}" >
                    {{item.shop}}</span>
                  </p>
                </div>
      </a>
              </div> 
            </div>
      </ion-content>
    </ion-view>

When I clicked one of those two, the page will change to lol.html and the other will change to head.html, but I need to make two htmls. How do I make one page that can handle all list of items, like in tab-chats and chat-detail examples.

How do I use .factory in the services.js properly? I tried to change the names and everything but it doesn’t show anything.
Thank You for replying

Could you provide a codepen example?

You can have a single html file but have multiple templates in each, have you used the tab starter template?