Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-controller="MyCtrl">

  <div class="container">
    Hello, {{name}}!
  </div>
</div>

CSS

.container {
  background: #efefef;
  border: 1px solid red;
}

.statistic-info {
  display: block;
  min-height: 150px;
  background: yellow;
}

JavaScript

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

myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.info = {
    clicks: 15862,
    spent: '$124',
    created: '04/08/2017',
    author: 'John Kovalenko',
    name: 'Advertise US'
  };


  var infoContainer = document.getElementsByClassName('container');


  //first method, doesnt work
  var info = document.createElement('div');
  info = angular.element(info).attr({
    'ng-bind': 'info',
    'class': 'statistic-info'
  });
  angular.element(infoContainer).append(info[0]);


  //second method , doesnt work
  var infoTwo = '<div><p>{{info}}</p></div>';
  angular.element(infoContainer).append(infoTwo);
}