Promise.then() creates a new promise

by jdmarshall

HTML

<script src="https://code.angularjs.org/1.2.12/angular.js"></script>
<div ng-controller="MyCtrl">
    <h2>Promise.then() chains</h2>
    <div class="output">First promise: {{output}}</div>
    <div class="output">Second promise: {{output2}}</div>
    <div class="input">
        <button ng-click='doClick()'>Click me</button>
    </div>
</div>

CSS

body{
    padding: 10px;
}

.input, .output {
    padding: 10px;
}

.output {
    height: 20px;
}

JavaScript

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

function MyCtrl($scope, $q) {
    $scope.count = 0;
    
    var deferred = $q.defer();
    // Promise.then() returns a new promise
    // TODO: rename to promise
    var deferred2 = deferred.promise.then(function(value) {
        $scope.output = value;
        return "second";
    });
    
    deferred2.then(function(value2) {
        $scope.output2 = value2;
    });
                   
    $scope.doClick = function() {
        deferred.resolve("first");
    };
}