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

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="angular-route@1.2.14" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="MainController.js"></script>
    <script src="UserController.js"></script>
    <script src="github.js"></script>
  </head>

  <body>
    <h1>Github Viewer</h1>
    <div ng-view=""></div>
  </body>

</html>

// Code goes here

(function(module) {

  var MainController = function($scope, $interval, $location, $log) {

    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.search = function(username) {
      if (countDowninterval) {
        $interval.cancel(countDowninterval);
        $scope.countdown = null;
      }

      //Search
      $log.log("Searching...")
      $location.path("/user/" + username);
    };
    $scope.username = "angular";
    $scope.countdown = 10;
    startCountdown(); 
  }; 
  
  module.controller("MainController", MainController);
  
}(angular.module("githubViewer")));
/* Styles go here */


<div>
  </h2>{{user.name}}</h2>
  {{error}}
  <div>Last Name: {{user.name}}</div>
  <div>Location: {{user.location}}</div>
  <div>
    <img src="{{user.avatar_url}}" style="width:80px;height:80px;" />
  </div>
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Count</option>
  </select>

</div>

<table border=1>
  <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 | number}}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>

</table>
<a href="#/main">Back to Search</a>
//***** This is a service in Angular 

(function(module){
  
  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(user){
      return $http.get(user.repos_url)
                  .then(function(response){
                    return response.data
                  });
    };
    
    return {
      getUser: getUser,
      getRepos: getRepos
    };
  };
  
  module.factory("github", github);
  
  
}(angular.module("githubViewer")));
  
//***** This is an angular app/module registering controllers based on routing.

(function(module) {
  module.config(function($routeProvider) {
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",  
        controller: "MainController"
      })
      .when("/user/:username", {
        templateUrl: "user.html",
        controller: "UserController"
      })
      .otherwise({redirectTo: "/main"})
  }); 
 
}(angular.module("githubViewer", ["ngRoute"])));
<div>
  {{ countdown}}

  <form name="searchUser" ng-submit="search(username)">
    <input type="text" required placeholder="Username to find" ng-model="username" />
    <input type="submit" value="Search" />
    
  </form>

</div>
// Code goes here

(function(module) {

  var UserController = function($scope, github, $routeParams, $log) {

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

    var onRepos = function(data) {
      $scope.repos = data;
    };
    var onError = function(response) {
      $scope.message = "Could not fetch the data!"
    };

    $scope.username = $routeParams.username;
    $scope.repoSortOrder = "-stargazers_count";
    $log.log("UserController username: " + $scope.username);
    github.getUser($scope.username).then(onUserComplete, onError);
  };

  module.controller("UserController", UserController);

}(angular.module("githubViewer")));