$http nested calls in AngularJS

by Nelu Malancea

HTML

<div ng-app='app' ng-controller='ctrl'>
    {{data}}<br><br>
    {{data2}}
</div>

JavaScript

angular.module('app',[])
.controller('ctrl', ['$scope', '$http', function($scope, $http){
    
    $scope.data = ['hi'];
    $scope.data2 = ['you'];
   
    var getFirst = function(){
            return $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=1&fname={firstName}&lname={lastName}")
                .then(function(resp){
                    $scope.data = resp.data;
                    return 4;
                });
        },
        getSecond = function(count){
            return $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows="+count+"&fname={firstName}&lname={lastName}")
                .then(function(resp){
                    $scope.data2 = resp.data;
                });
        };
    
    getFirst()
        .then( getSecond );
}]);