<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> </head> <body> <div ng-controller="ServiceCtrl"> <label for="username"> Type in a Github username </label> <input type="text" ng-model="username" placeholder="Enter a Github username"> <ul> <li ng-repeat="event in events"> {{event.actor.login}} {{event.repo.name}} </li> </ul> </div> <script> angular.module('myApp.services', []) .factory('githubService', function ($http) { var githubUrl = 'https://api.github.com'; var runUserRequest = function (username, path) { return $http({ method: 'JSONP', url: githubUrl + '/users/' + username + '/' + path + '?callback=JSON_CALLBACK' }); } return { events: function (username) { return runUserRequest(username, 'events'); } } }); angular.module('myApp', ['myApp.services']) .controller('ServiceCtrl', function ($scope, githubService) { $scope.$watch('username', function (newUsername) { githubService.events(newUsername).success(function (data, status, headers) { $scope.events = data.data; }) }); }); </script> </body> </html>