angularjs - Angular $http difference between .success() and .then()

Question

Sometimes I have trouble to fetch my data using $http service. And I did not 100% understand the main difference between .success() and .then()

The following is an example that I can fetch the data using $http().then(), but I can't fetch my data using $http().success(). Can anyone explain why?

Code using $http.success() http://jsfiddle.net/xoonpLte/11/

var manuRep = angular.module('manuRep', ['ui.bootstrap']);
  manuRep.controller('MyAppController', function($scope, $http) {
    $http.get('https://dl.dropboxusercontent.com/u/59954187/jobs.json').
      success(function(response) {
        $scope.cats = response.data;    
      }).
      error(function(error){
        alert(JSON.stringify(error));
      return error;
      });
  });

Code using $http.then() http://jsfiddle.net/xoonpLte/12/

var manuRep = angular.module('manuRep', ['ui.bootstrap']);
  manuRep.controller('MyAppController', function($scope, $http) {
    $http.get('https://dl.dropboxusercontent.com/u/59954187/jobs.json').
      then(function(response) {
        $scope.cats = response.data;    
      });
  });

Answer 1

.then is a promises

.success and .error is a callback.

Why callbacks or Promises?

1 . Promises can handle global errors.
2 . Promises can be chained (you don't have this encapsulation like callbacks)

P = promise,
R = response,
E = error.

1:

P1(R1)
.P2(R2)
.P3(R3, E3)  

Error 3 will be called if there is an error in promise 1, 2 or 3.
That is not possible with callbacks.

2:
If you have 3 promises:

P1(R1, E1)
.P2(R2, E2)
.P3(R3,E3)

If you have 3 callbacks

P1().success(P2().success(P3().success().error()).error()).error()

EDIT

.service('Auth', function(){
  this.isLoggedIn = function(){
     return $http.get('url/isLoggedIn');
  };
})

.service('getData', function(){
  this.name = function(){
    return $http.get('url/data/name');
  }
})

.controller('MyCTRL', ['Auth', 'getData', function(auth, getData){

   Auth.isLoggedIn().then(function(resp){
     return getData.name(); //By sending a value back inthe response, next response is called
   })
   .then(function(res){
        //Here we are
    }, function(err){
        //Global error.
        //This will be called in P1 or P2
    })


}]);