Forward Advance Learning


We access remote services using the $http service, which we can inject into our controller.

var url = '';

This gives us a Promise object, which we can chain callbacks onto. In the callback, we generally push the response in to $scope, then allow the template to take over.

.then(function(response) {
$scope.cats =

Once your data is in scope, a digest will fire and your template will automatically update to display it.


JSONP is a hack which lets us make cross site AJAX requests. We use the $http object to make a request. We use the .then to respond when an AJAX request completes.

angular.module('app', [])
.controller('ajaxController', function($scope, $http) {
var url = ''
.then(function(response) {
$scope.cats =;

Flickr Exercise

The Flickr JSONP endpoint looks like this:

Pull the Flickr feed from the Internet and display the images.


Allow the user to search for a tag.

Test with Karma.

Exercise - Karma

Write Karma tests. Use $httpBackend to mock out the AJAX call and verify that the data is retrieved.