How to keep Angular UI responsive during an http get request? - angularjs

Question

I have a get request in my controller:
$http.get('/api/ideas').success(function(ideas) {
vm.ideas = ideas;
});
As soon as my controller is called, this api is called, and my UI becomes unresponsive until i get the result from the callback / all ideas are listed (with mg-repeat obviously). When i have e.g. 1000 ideas in my database, my UI is unresponsive for 3-5 seconds. But i thought that call was a callback ?!
This is how my backend looks like:
router.get('/api/ideas', controller.find);
exports.find = function(req, res) {
Idea.find(function (err, ideas) {
if(err) { return handleError(res, err); }
return res.json(200, ideas);
});
};
What is the problem here?
EDIT - SOLVED:
When i put a delay in backend like this:
exports.index = function(req, res) {
Idea.find(function (err, ideas) {
if(err) { return handleError(res, err); }
setTimeout(function() {
return res.json(200, ideas);
}, 3000);
});
};
although i just have 2 ideas, the UI is responsive during that 3 seconds. I can still click other parts till i get a response. So i think #Iggy is right. The problem is not the http get, but ng-repeat.

Answer 1

The problem is not the callback here (it's async), the problem is ng-repeat slowing your UI by adding your ideas one by one in the DOM.
To solve this you can use pagination, or look at the different way to improve ng-repeat performance.
A basic way to do so is to use the limitTo filter :
<div ng-init="totalDisplayed=20" ng-repeat="item in items | limitTo:totalDisplayed">
{{item}}
</div>
<button class="btn" ng-click="totalDisplayed = totalDisplayed+20">Load more</button>