title: How to append/display/render data to page on click
body: <p>I want to get the data from the API and display it on my index.html page. What's the best way in doing this? looking for multiple ways, that be jquery or data binding with angular. I can't seem to figure out a function to display the data I get. I'm fetching two different datas from two different players and I want to display them side by side. JSON data is returned by the API </p>
  
  <pre><code>                              /**Part of Index.html**/
  &lt;body ng-app="lolvs" ng-controller="MainController"&gt;
  
      &lt;div class="throwdown"&gt;
  
          &lt;h1&gt; LoL THROWDOWN &lt;/h1&gt;
          &lt;div class="summonerNames"&gt;
              &lt;input id="summonerOne" ng-model="summonerOne" placeholder="summoner name"&gt;
              &lt;button class="start" ng-click="start()"&gt;vs&lt;/button&gt;
              &lt;input id="summonerTwo" ng-model="summonerTwo" placeholder="summoner name"&gt;
          &lt;/div&gt;
  
                                      /**app.js**/
  
  (function(){
      'use-strict'
  
  var mainCtrl = function mainCtrl($scope, $rootScope, MainFactory) {
      $scope.start = MainFactory.start;
  
      $rootScope.$on('gotStats', function (e, m) {
          console.log('arguments &gt;&gt;', arguments);
  
          $scope.player1 = {
              totalChampionKills : 0,
              totalDeathsPerSession : 0,
              totalAssists : 0,
              totalSessionsWon : 0,
              totalSessionsLost :0,
              totalMinionKills: 0,
              totalTurretsKilled: 0,
          };
  
          $scope.apply();
      });
  };
  
  var mainFactory = function ($http, $rootScope) {
      var api = 'api_key=***************************';
  
      var add = function(data, status, headers) {
          var stats = {
              totalChampionKills : 0,
              totalDeathsPerSession : 0,
              totalAssists : 0,
              totalSessionsWon : 0,
              totalSessionsLost :0,
              totalMinionKills: 0,
              totalTurretsKilled: 0,
          };
  
          var champions = data.champions;
  
          for(var i = 0; i &lt; champions.length; i++) {
              var champ = champions[i].stats;
  
              for(stat in stats) {
                  if(champ[stat]) {
                      stats[stat] += champ[stat]
                  }
              }
          }
      };
  
      var start = function(name) {
          var options = { 
              url: 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + name + '?' + api,
              type: 'GET',
              success: summonerOption
          };
  
          $http(options);
      };
  
      var summonerOption = function(data, status, headers) {
          var name = Object.keys(data)[0];
  
          var newOption = {
              url: 'https://na.api.pvp.net/api/lol/na/v1.3/stats/by-summoner/' + data[name].id + '/ranked?season=SEASON4&amp;' + api,
              type: 'GET',
              success: add
          };
  
          $http(newOption);
      };
  
      return {
          start: start
      }
  
  
  };
  
  
  
  angular.module('lolvs', [])
      .controller('MainController', ['$scope', '$rootScope', 'MainFactory', mainCtrl])
      .factory('MainFactory', ['$http', '$rootScope', mainFactory])
  
  })();
  </code></pre>