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

ionic-v1
1 
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);
})

//html page

{{chat.title}}
2

Please check the sidemenu starter template.

$ ionic start myapp sidemenu