Untitled

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
  <div ng-app="App" ng-controller="Example">
    <button type="button" ng-click="sendRequest()">Send</button>
    <pre>{{myService.result}}</pre>
  </div>
</body>

</html>

// Code goes here

angular.module('App', []);

angular.module('App').service('apiService', ['$http', function($http)
{
    var api = "https://www.reddit.com/r/GlobalOffensive/hot.json";

    var self = this;
    self.result = {};

    self.getSection = function(){
        var url = api;

        $http.get(url).then(function(res){
            self.result = res;
        });
    }
}]);

angular.module('App').controller('Example', ['apiService', '$scope', function (apiService, $scope) {
    $scope.myService = apiService;
    
    $scope.sendRequest = function(){
      $scope.myService.getSection();
    }
}]);

/* Styles go here */