Angular JS- Response from webservice not populating into list - json

Question

I am very new to Angular JS and Ionic framework .
In services.js file, inside .factory method ,the webservice is invoked and can show the alert with the json response as shown in the screenshot below
But, the list view is not populated. I have tried in the two ways .
Try 01:
Angular JS code
angular.module('starter.services', [])
.factory('Chats', function($http) {
var chats;
return {
all: function() {
$http.get(url).
then(function(response) {
//alert(JSON.stringify(response.data.employee));
chats=response.data.employee;
alert(JSON.stringify(chats));
return chats;
}, function(error) {
alert(JSON.stringify(error));
});
return chats;
}
};
});
HTML5 code
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
<img ng-src="http://findicons.com/files/icons/820/simply_google/256/google_android.png">
<h2>{{chat.employeeCode}}</h2>
<p>{{chat.createdBy}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try 2
In this try I have assigned the chats variable in the same file to the following array,
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
}];
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
}];
HTML5
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
<img ng-src="https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try 2 is working as well as I have assigned hardcoded json array to the variable . But, Try 1 is not working .
UPDATE:
controller.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
})
/*.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})*/
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
Please help me finding the solution .

Answer 1

You're not waiting for the promise to resolve in your controller.
Change your controller call of Chats.all() to:
Chats.all().then(function(chats) {
$scope.chats = chats;
});
Also, change the all function in your service to:
function all() {
return $http
.get(url)
.then(function(response) {
chats = response.data.employee;
return chats;
}, function(error) {
alert(JSON.stringify(error));
});
}