AngularJS 1.5.x

angular.module('githubViewer', ['ng-route']);

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

  <head>
    <meta charset="utf-8" />
    <title>GitHub_Viewer</title>
    <script>
    document.write('<base href="' + document.location + '" />');
  </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="mainCtrl.js"></script>
    <script src="githubService.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-if="!user">
    You have {{ countdown }} seconds to write the Github user name
  </div>
    <div> {{ error }}</div>
    <h1>{{message}}</h1>
    <form name="searchUser" ng-submit="search(username)">
      <input type="search" name="username" required="" placeholder="GitHub user name" ng-model="username" />
      <input type="submit" name="submit" />
    </form>
    <div ng-include="'userdetail.html'" ng-show="user"></div>
  </body>

</html>

/* Put your css in here */

<div id="userDetail">
    <div>name: {{ user.name }}</div>
    <div>location: {{user.location}}</div>
    <img ng-src="{{user.avatar_url}}" title="{{user.name}}">
    <div>
      order:
      <select ng-model="sortorder">
        <option value="+name">Name</option>
        <option value="-stargazers_count">Stars</option>
        <option value="+language">Language</option>
      </select>
    </div>
  </div>


  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Stars</th>
        <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos | orderBy:sortorder">
        <td>{{repo.name}}</td>
        <td>{{repo.stargazers_count | number}}</td>
        <td>{{repo.language}}</td>
      </tr>
    </tbody>
  </table>

angular.module('githubViewer')
  .factory('githubFactory', ['$http', function($http) {

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

    var getRepos = function(user) {
      return $http.get(user.repos_url)
        .then(function(response) {
          return response.data;
        });
    };

    return {
      getUser: getUser,
      getRepos: getRepos
    };
    
  }])

angular.module('githubViewer')
  .controller('MainCtrl', ['$scope', 'githubFactory', '$interval', '$log', '$location', '$anchorScroll',
    function($scope, $interval, githubFactory, $log, $location, $anchorScroll) {

      var onComplete = function(data) {
        $scope.user = data;
        githubFactory.getRepos($scope.user)
          .then(onRepos, onError);
      };

      var onRepos = function(data) {
        $scope.repos = data;
        $location.hash("userDetail");
        $anchorScroll();
      }

      var onError = function(reason) {
        $scope.error = "Could not fetch the data.";
      };

      $scope.search = function(username) {
        $log.info("you are searching for " + username);
        githubFactory.getUser(username)
          .then(onComplete, onError);
        if (countdownInterval) {
          $interval.cancel(countdownInterval);
        }

      };

      var decrementCountdown = function() {
        $scope.countdown -= 1;
        if ($scope.countdown < 1) {
          $scope.search($scope.username);
        }
      };
      var countdownInterval = null;
      var startcountdown = function() {
        countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
      };


      $scope.message = "GiHub user viewer";
      $scope.username = "Angular";
      $scope.sortorder = "-stargazers_count";
      $scope.countdown = 10;
      startcountdown();


    }])