Github API Call Demo - Promises

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

app.factory('githubService', function($http) {
  var GITHUB_API_ENDPOINT = 'https://api.github.com';
  return {
    getUserAvatarUrl: function(username) {
      return $http.get(GITHUB_API_ENDPOINT + '/users/' + username).then(function(res) {
        return res.data.avatar_url;
      });
    }
  }
});

app.controller('MainCtrl', function($scope, githubService) {
  $scope.callAPI = function() {
    githubService.getUserAvatarUrl($scope.username).then(function(avatarSrc) {
      $scope.avatarSrc = avatarSrc;
    });
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="app.js"></script>
</head>

<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <input type="text" ng-model="username" placeholder="Enter GitHub username">
    <p ng-show="callingOut">Calling out....</p>
    <button ng-click="callAPI()">Call API</button>
    <img ng-src="{{ avatarSrc }}"></img>
    <pre> {{ avatarSrc }} </pre>
  </div>
</body>

</html>

/* Put your css in here */

img {
  display: block;
}