<!DOCTYPE html>
<html ng-app="postExample">

  <head>
    <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script src="usersController.js"></script>
    <script src="userRepoService.js"></script>
  </head>

  <body ng-controller="UsersController">
    <h1>Post Angular Example</h1>
    <select id="UserSelector" style="width: 100%;">
      <option ng-repeat="user in users" value="{{user.id}}">{{user.login}}</option>
    </select>
  </body>

</html>
(function(){
    
    var userRepoService = function($http){
      
      var getUsers = function(username){
            return $http.get("https://api.github.com/users")
                        .then(function(response){
                           return response.data; 
                        });
      };
  
      return {
          get: getUsers
      };
        
    };
    
    var module = angular.module("postExample");
    module.factory("userRepoService", userRepoService);
    
}());
(function(){
    
   var app = angular.module("postExample",[]);
  
   var UsersController = function($scope, userRepoService){
     
     var onFetchError = function(message){
       $scope.error = "Error Fetching Users. Message:" +message;
     };
     
     var onFetchCompleted = function(data){
        $scope.users =data;
     };
     
     var getUsers = function(){
       userRepoService.get().then(onFetchCompleted,onFetchError);
     };
     
     getUsers();     
     
   };
  
   app.controller("UsersController", UsersController);
  
}());