How to make ng-repeat list items link to a .html page

I am trying to build a list using ng-repeat such that if clicked on any item the list will get replaced by the content of html page linked to the tapped list item.

So far I have tried this,

//my app.js

.state('app.c.ctopic', {
      url: "/ctopic",
      views: {
          'tab-ctopic': {
                    templateUrl: "tech/ctopic.html",
                    controller: 'ChatsCtrl'
                        }
             }
    })
 
.state('app.c.ctopic:chatId', {
      url: "/c/ctopic:chatId",
      views: {
          'tab-ctopic': {
                      templateUrl: 'tech/chat-detail.html',
                      controller: 'ChatDetailCtrl'
                        }
              }
    })





//controller.js

.factory('Ctopic', function() {
  
  var chats = [ { title: 'Arrays', id:11 ,desc: 'tech/ctopic/Union.html'},
    { title: 'Bit Field Declaration', id:12 },
    { title: 'C Pointers', id: 13 },
    { title: 'Conditional Statements', id: 14 },
    { title: 'File IO', id: 15 },
    { title: 'Function', id: 16 },
    { title: 'Input & Output', id: 17 },
    { title: 'Loops', id: 18 },
    { title: 'Preprocessor Operators', id: 19 },
    { title: 'Preprocessor', id: 20 },
    { title: 'String', id: 21 },
    { title: 'Structures', id: 22 },
    { title: 'Typedef', id: 23 },
    { title: 'Union', id: 24 }];

  return {
        all: function() {
                        return chats;
                        },
        get: function(chatId) {
                        for (var i = 0; i < chats.length; i++) {
                              if (chats[i].id === parseInt(chatId)) {
                                                                  return chats[i];
                                                                    }
                              }
         return null;
         }
  };
})



.controller('ChatsCtrl', function($scope, Ctopic) {
            $scope.chats = Ctopic.all();
  
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Ctopic) {
             $scope.chat = Ctopic.get($stateParams.chatId);
})
<ion-view view-title="C Language">
  <ion-content >
     <div class="list list-inset">
            <div class="item item-icon-right" ng-repeat="chat in chats"   ui-sref="app.c.ctopic">
                  {{chat.title}}
         <i class="icon ion-ios-arrow-right"></i>
            </div>
     </div>
   </ion-content>
</ion-view>