Handling errors of nested promises

This is in one of my AngularJS controllers:

websiteService.get('websites').then(function(data) {
    $scope.websites = data;
    websiteService.get('groups').then(function(data) {
        $scope.groups = data;
        websiteService.get('websites_groups').then(function(data) {
            $scope.websites_groups = data;
            // If everything goes well, my code will continue here - not really neat
        }, function(error) {
            $scope.errors.push(error);
        });
    }, function(error) {
        $scope.errors.push(error);
    });
}, function(error) {
    $scope.errors.push(error);
});

What would be a better, more elegant way to do this? Is there a best practice?

In my opinion, success functions are nested really nicely, in obvious and chronological and logical order, while error functions make everything messy.

If I understand correctly, you can unnest your code, and catch any possible error at the end. That's the idea of using promises:

websiteService.get('websites').then(function(data) {
  $scope.websites = data
  return websiteService.get('groups')
}).then(function(data) {
  $scope.groups = data
  return websiteService.get('websites_groups')
}).then(function(data) {
  $scope.websites_groups = data
}).catch(function(error) {
  $scope.errors.push(error)
})

StackExchange Code Review Q#90559, answer score: 5