AngularJs: Get Started Services: $anchorScroll, $location

<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="css/style.css" />

  <script src="js/site.js"></script>
  <script src="js/app.js"></script>
  <script src="js/appControllers.js"></script>


</head>

<body>
  <div ng-app="MainApp">

    <div ng-controller="MainController">
      <h1>{{ message }}</h1>
      <!-- View -->

      {{ countdown }}
      <form name="searchUser" ng-submit="search(searchName)">
        <input type="search" required placeholder="Username to find" ng-model="searchName" />
        <input type="submit" value="Search" />
        <span>{{searchName}}</span>
      </form>

      <br/>
      <div>{{error}}</div>
      
      <div ng-include="'userDetails.html'" ng-show="user.name"></div>

    </div>


  </div>

</body>

</html>

/* Styles go here */

.headshot {
  max-width: 200px
}

.headshot-sm {
  max-width: 100px
}

AngularJs: Get Started

Services: $anchorScroll, $location

// MODULE

(function () {
  
  "use strict";
  
  angular.module("MainApp", []);
  
})();

// CONTROLLERS

(function() {
  
  "use strict";
  
  
  //MainController
  angular.module("MainApp")
    .controller("MainController", ["$scope", "$http", "$interval", "$log", "$anchorScroll", "$location", MainController]);
  
  function MainController($scope, $http, $interval, $log, $anchorScroll, $location) { //Controller
    
    /* ****************************************************** */
    /*                 Search for user                        */
    /* ****************************************************** */
    
    var onUserComplete = function(response){
      $scope.user = response.data;
    
      if($scope.user.name) {
        $http.get($scope.user.repos_url)
        .then(onRepos, onError);
      }
      else {
        $scope.user = {};
        $scope.error = "Invalid User Data";
      }
      
      
    };
    
    var onError = function(reason) {
      $scope.error = "Could not fetch data. Error: " + reason.data.message;
      $scope.user = {};
    };
    
    var onRepos = function (response) {
      $scope.user.repos = response.data;
      $location.hash("userDetails");
      $anchorScroll();
    };
    
    $scope.search = function(userName){
      $scope.error = "";
      $scope.user = {};
      
      $log.info("Searching for " + userName);
      
      $http.get("https://api.github.com/users/" + userName)
        .then(onUserComplete, onError);
      
      //Cancel interval
      if(countDownInterval) {
        $interval.cancel(countDownInterval);
        $scope.countdown = null;
      }
        
    };
    
    /* ****************************************************** */
    /*                 Sort                              */
    /* ****************************************************** */
    
    $scope.changeRepoSortOrder = function(orderBy) {
      $scope.repoSortOrder = changeSortOrder($scope.repoSortOrder, orderBy);
    };
  
    /* ****************************************************** */
    /*                 CountDown                              */
    /* ****************************************************** */
  
    var decrementCountDown = function () {
      $scope.countdown -= 1;
      if($scope.countdown < 1) {
        $scope.searchName = $scope.searchName? $scope.searchName : "angular";
        $scope.search($scope.searchName);
      }
    };
    
    var countDownInterval = null; // used to cancell interval is search is already executed
    var startCountDown = function() {
      countDownInterval = $interval(decrementCountDown, 1000, $scope.countdown);
    };
    
    /* ****************************************************** */
    /*                  Initializations                       */
    /* ****************************************************** */
    
    $scope.message = "Git Hub Viewer!"; //Model
    $scope.repoSortOrder = "-stargazers_count";
    $scope.countdown = 5;
    $scope.searchName = "angular";
    
    startCountDown();
    
  }
  
})();

function changeSortOrder(current, newSort) {

  if(!current && !newSort)
    return "";

  if(!current)
    current = newSort;
    
  if(!newSort)
    mewSort = current;

  var direction = current.slice(0, 1);
  var name = current.replace("+", "").replace("-", "");

  if (newSort == name && direction == "+") 
    return "-" + newSort;
  else
    return "+" + newSort;

}

<div id="userDetails"> 

  <br/>
  <div>

    <div>Name: {{ user.name }}</div>
    <div>Location: {{ user.location }}</div>
    <div>
      <img src="{{user.avatar_url}}" alt="user.name" class="headshot-sm">
    </div>

  </div>

  <table>
    <thead>
      <tr>
        <th><a href="#" ng-click="changeRepoSortOrder('name')">Name</a></th>
        <th><a href="#" ng-click="changeRepoSortOrder('stargazers_count')">Stars</a></th>
        <th><a href="#" ng-click="changeRepoSortOrder('language')">Language</a></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in user.repos | orderBy:repoSortOrder ">
        <!--orderBy:'-stargazers_count' -->
        <td>{{ repo.name }}</td>
        <td>{{ repo.stargazers_count | number }}</td>
        <td>{{ repo.language }}</td>
      </tr>
    </tbody>
  </table>

</div>