Performing an Async call...

Any sophisticated interface will require integration with the outside word. You can have a controller kick off a call to a service, which can integrate your web service asynchronously, and pass an answer back to the UI using a scope's broadcast.

by krimple

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo' ng-controller='DemoCtrl'>
    <input type="button" ng-click="makeAsyncCall" value="DoJSON" /><br/>
    Result : {{foo}}</div>

JavaScript

demo = angular.module('demo', [], '');

demo.controller('DemoCtrl',

function ($scope, DemoService) {

    $scope.$on('asyncResult', function (event, data) {
        $scope.foo = data;
    });

    DemoService.makeAsyncCall();

});


demo.factory('DemoService', function ($http, $rootScope) {
    var service = {
        makeAsyncCall: function () {
            console.log('making a call...');
            $http.get('/echo/json/?a=b&c=d').
            success(function (data, status, headers, config) {
                $rootScope.$broadcast('asyncResult', 'it worked!');
            }).error(function (data, status, headers, config) {
                $rootScope.$broadcast('asyncResult', 'it failed');
            });
            console.log('done');
        }
    };
    return service;
});