JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ci.angularjs.org/job/angular.js-igor/321/artifact/build/pkg/0.10.6-fb6bba07/angular-0.10.6-fb6bba07.js" ng:autobind></script>

<div ng:controller="MyCtrl">
  <p>
      Greeting: {{greeting}}
  </p>
  <button ng:click="greet()">Greet the future!</button>
  <button ng:click="greetInTheFuture()">Greet the future in the future!</button>
</div>

CSS

p {
    margin: 2em 1em;
}

JavaScript

function MyCtrl($q, $defer) {
    var deferredGreeting = $q.defer();
    this.greeting = deferredGreeting.promise;

    /**
     * immediately resolves the greeting promise
     */
    this.greet = function() {
        deferredGreeting.resolve('Hello, welcome to the future!');
    }

    /** 
     * resolves the greeting promise with a new promise that will be fulfilled in 1 second
     */
    this.greetInTheFuture = function() {
        var d = $q.defer();
        deferredGreeting.resolve(d.promise);
        $defer(function() {
            d.resolve('Hi! (delayed)');
        }, 1000);
    }
};