External Json File : Detail Page


Hi everyone,

I use the Tab Template, with list of chats and chats detail. I’ve put the data into a json file, and add it like this in my code : $http.get(“http://abcd/Chats.json”).
The data are showing on the List of Chats, but it doesn’t work on the Detail Page.
I’ve tested a lot of solution, but I’m still getting an error…

Here is my code:

 angular.module('starter.services', [])

.factory('Chats', function($http) {
 // Might use a resource here that returns a JSON array

return {
getChats: function() {
  return $http.get("http://abcd/Chats.json").success(function(response){
    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, Chats) {
     $scope.chats =response;

  .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);

My error is: cannot read property of chat undefined…
Any help please?