Angular.js Service

HTML

<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div ng-repeat="contact in contacts track by $index" class="container" ng-click="setContact(contact.login)">
      <img src="{{contact.avatar_url}}">
      <div>
        <h3>{{contact.login}}</h3>
        <p>{{contact.html_url}}</p>
      </div>
    </div>
    <div class="loader-container" ng-show="loader">
      <div class="loader"></div>
    </div>
  </div>
</div>

CSS

.container {
  display:flex;
  margin-bottom:30px;
  border: 1px solid black;
  border-radius:5px;
  padding:15px;
  margin:15px;
  cursor:pointer;
}

.container:hover {
  background-color:#dfdfdf67;
}

.container img {
  width:40px;
  height:40px;
}

.container div {
  margin-left:10px;
}

.container h3, .container p {
  margin:0;
  padding:0;
}

.loader-container {
  position:absolute;
  opacity:0.5;
  display:flex;
  width:100%;
  height:100%;
  justify-content:center;
  align-items: center;
}

.loader {
  border: 3px solid rgb(150, 150, 150);
  border-top: 3px solid rgb(220, 220, 220);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript

var myApp = angular.module('myApp', []);
 
myApp.service('contactService', function($http) {
  function getConctacts(params) {
    return $http.get('https://api.github.com/users/' + params + '/followers');
  }
  return {
    getConctacts: getConctacts
  }
});

myApp.controller("mainCtrl",function($scope, contactService){
  $scope.setContact = function(login){
  	$scope.loader = true;
  	contactService
    	.getConctacts(login)
      .then(function(resp){
      	console.log(resp.data)
        $scope.contacts = resp.data;
        $scope.loader = false;
      });
  }
  $scope.setContact('octocat');
});