A simple example of an angular promise.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http, $timeout) {
  $scope.name = 'AngularJS Promises';
 
  
  function load() {
    $http.get("readme.txt").then(function(results){
      $scope.readme = results.data;
    });
  }
  
  function getUserScore(){
   
    /* 
       because the http promise calls are using THEN in place   
       of SUCCESS and ERROR, it should be noted that 
       when you access the data from the results, you must 
       drop down into RESULTS.DATA instead of just RESULTS.
   */
   
    // first ajax call
    $http.get("userInfo.json").then(function(results){
      var user = results.data;
      
      // the timeouts simulate going and hitting a remote server.
      $timeout(function () {
        $scope.user = user;
      }, 500);
      
      // use results of 1st call to make second call
      return $http.get(user.id + 'score.json');
    }).then(function(result){
      
      // the result of the 2nd call are used 
      $timeout(function () {
        $scope.score = result.data.total;
      }, 1800);
      
    });
    
  }
 
  $scope.callLoader = function(){ load(); }
  $scope.callUserLoader = function(){ getUserScore(); }
  $scope.clear = function(){
    $scope.readme = '';
    $scope.user = '';
    $scope.score  = '';
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <div class="container">
    <h1>{{name}}!</h1>
    <hr />
    <h2>HTTP Request Demo</h2>
    <p><button class="btn btn-primary" ng-click="callLoader()">Load Request</button></p>
    <pre>{{ readme || "Loading..." }}</pre>
    <b ng-show="readme">Request finished</b>
    <hr />
    <h2>User Score HTTP request</h2>
      <p><button class="btn btn-primary" ng-click="callUserLoader()">Load Score</button></p>
   <div class="well">
        <p>User: {{ user.name || "Loading..." }}</p>
        <p>Score: {{ score || "Loading..." }}</p>
    </div>
     <p><button class="btn btn-danger" ng-click="clear()">Reset Page</button></p>
  
  </div>
   </body>

</html>

/* Put your css in here */

Now is the time for all good men to learn about a promise.

{
    "name": "Robert Johnson",
    "id": "123"
 
}

{ 
  "total":"98.9%"  

}