<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="githubViewer">

  <head>
    <title>AngualrJSWebsite</title>
    <link rel="icon" href="http://realfavicongenerator.net/blog/wp-content/uploads/2015/10/demo_favicon.png" type="image/png" sizes="16x16" />
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="myCtrl.js" type="text/javascript"></script>
    <script src="github.js" type="text/javascript"></script>
  </head>

  <body ng-controller="myCtrl">
    <h1>{{message}}</h1>
    <div>{{error}}</div>
    <div>{{countdown}}</div>
    <form name="searchUser" ng-submit="search(username)">
      <input type="search" required="" placeholder="Username to find" ng-model="username" />
      <input type="submit" value="Search" />
    </form>
    <div ng-include=" 'userdetails.html' " ng-show="userinfo"></div>
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>S No.:</th>
            <th>User Name</th>
            <th>Type</th>
            <th>Avatar</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="usr in user">
            <td style="vertical-align: middle;">{{usr.id}}.</td>
            <td style="vertical-align: middle;">{{usr.login}}</td>
            <td style="vertical-align: middle;">{{usr.type}}</td>
            <td>
              <img ng-src="{{usr.avatar_url}}" title="{{usr.login}}" height="70" width="70" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>
var app = angular.module("githubViewer", []);
app.controller("myCtrl", function(
  $scope, github, $interval, $log,
  $anchorScroll, $location) {
  var onUserComplete = function(data) {
    $scope.user = data;
  }
  var onRepos = function(data) {
    $scope.repos = data;
  };

  var onError = function(reason) {
    $scope.error = "Sorry Could not fetch the User :-(";
  }
      github.getAllUser().then(onUserComplete, onError);

  var decrementCount = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < 1) {
      $scope.search($scope.username);
    }
  };
  var countdowninterval = null;
  var startCountdown = function() {
    countdowninterval = $interval(decrementCount, 1000, $scope.countdown);
  }
  $scope.search = function(username) {
    $log.info("Searching for" + username);
    github.getUser(username).then(function(data) {
      $scope.userinfo = data;
      github.getRepos($scope.userinfo).then(onRepos, onError);
      $location.hash("userDetails");
      $anchorScroll();
      if (countdowninterval) {
        $interval.cancel(countdowninterval);
        $scope.countdown = null;
      }
    });
  };

  $scope.username = "josh";
  $scope.message = "GitHub Viewer";
  $scope.countdown = 5;
  startCountdown();
});
/* Styles go here */

In this Plunk I've created a $http .get service and
used api.GitHub.com to retrieve the data of a GitHub user
(function() {

  var github = function($http) {

    var getUser = function(username) {
      return $http.get("https://api.github.com/users/" + username)
        .then(function(response) {
          return response.data;
        });
    };

    var getRepos = function(userinfo) {
      return $http.get(userinfo.repos_url)
        .then(function(response) {
          return response.data;
        });
    };
    var getAllUser = function() {
      return $http.get("https://api.github.com/users?since=135") //you can find these user at "https://api.github.com/users" adddress
        .then(function(response) {
          return response.data;
        });
    };
    return {
      getUser: getUser,
      getRepos: getRepos,
      getAllUser: getAllUser
    };
  };
  var module = angular.module("githubViewer");
  module.factory("github", github);
}());
<div id="userDetails">
  User Name: {{userinfo.name}}, Loacation: {{userinfo.location}}
  <br>
  <img ng-src="{{userinfo.avatar_url}}" title="{{userinfo.name}}" style="height:90px;width:90px;"> Order Repository By:
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Stars</option>
    <option value="+language">language</option>
  </select>
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
      <td>{{repo.name}}</td>
      <td>{{repo.stargazers_count}}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>
(function(){
  
  var app = angular.module("githubViewer", ["ngRoute"]);
  
  app.config(function($routeProvider){
    
  });
  
}());