AngularJS Live Example - $q

HTML

<div ng:app="myApp">
 <div ng-controller="Ctrl1">
   Hello <input ng-model='name' ng-model-instant> <hr/>
   <span ng:bind="name"></span> <br/>
     <span ng:bind="result.aField | json"></span> 
 </div>
</div>

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-misko/ws/build/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

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

myApp.factory('myService', ['$q', '$rootScope', function($q, $rootScope) {
    return function(name) {
        var d = $q.defer();

        setTimeout(function() {
            $rootScope.$apply(function() {
                d.resolve({
                    aField: 'Hello ' + name + '!'
                });
            });
        }, 1000);
        return d.promise;
    };}]);

function Ctrl1($scope, myService) {
    $scope.name = 'angular';
    $scope.result = myService($scope.name);
}