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

<head>
  <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="MainController">
  <h1>{{message}}</h1>

  <div>{{ error }}</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>
    <h2>{{user.name}}</h2>
  </div>
  
  <div>
    <img ng-src="{{user.avatar_url}}" />
  </div>
  <select ng-model="repoSortOrder">
      <option value="+name">Name</option>
      <option value="-stargazers_count">Stars</option> 
      <option value="+language">Language</option>
  </select>
  <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 | number}}</td>
        <td>{{repo.language}}</td>
       </tr>
    </tbody>
  </table>
  
</body>

</html>
// Code goes here
(function() {
  
  var app = angular.module("gitHubViewer", []);
  
  var MainController = function($scope, $http) {

    var onUserComplete = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url)
        .then(onRepos, onError);
    }
    
    var onRepos = function(response)
    {
      $scope.repos = response.data;
    }
    
    var onError = function(response) {
      $scope.error = "Could not fetch data.";
    }

   $scope.search = function(username){
      $http.get("https://api.github.com/users/"+ username).then(onUserComplete, onError);
   }

    $scope.message = "GitHub Viewer";
    $scope.username = "angular";
    $scope.repoSortOrder = "-stargazers_count";
  };
  
  app.controller("MainController", ["$scope", "$http", MainController]);
}());
/* Put your css in here */