var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.area = '';
  $scope.category = 0;
  $scope.response = {};
  
  $scope.requestAPI = function (area, category) {
    if(area != ''){
      $http.get("https://www.reddit.com/r/GlobalOffensive/"+ $scope.area +".json?limit="+category).then(function(res){
        console.log('res', res);
        $scope.response = res.data.data.children;
      });
    }
  }
  
  $scope.$watch('area', function() {
    $scope.requestAPI($scope.area, $scope.category);
  });
  
  $scope.$watch('category', function() {
    $scope.requestAPI($scope.area, $scope.category);
  });
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <pre>{{area}}</pre>
    <pre>{{category}}</pre>
    <pre>{{response}}</pre>
    <br>
    <form>
      <input type="radio" value="hot" ng-model="area"> Hot<br>
      <input type="radio" value="top" ng-model="area"> Top<br>
      <input type="radio" value="new" ng-model="area"> New
    </form>
    <br>
    <form>
      <input type="radio" value="1" ng-model="category"> Limit 1<br>
      <input type="radio" value="5" ng-model="category"> Limit 5<br>
      <input type="radio" value="10" ng-model="category"> Limit 10
    </form>
    <br>
    <div>
      <ul class="list-group">
        <li ng-repeat="item in response" class="list-group-item">{{ item.data.title }}</li>
      </ul>
    </div>
  </body>

</html>
/* Put your css in here */