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.

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;
    });

    $scope.makeAsyncCall = function() {        
        DemoService.makeAsyncCall($scope);
    };

});


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