Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <svg width=400 height=300>
    <rect ng-repeat="chart in charts" ng-attr-height="{{chart.height}}" ng-attr-width={{chart.width}} ng-attr-x="{{chart.x}}" fill={{chart.color}} stroke=black stroke-width:1px></rect>


  </svg>
</div>

CSS

rect {
  transition: 0.5s;
}

svg {
  transform: rotate(180deg);
}

JavaScript

var app = angular.module("myApp", [])

app.controller("MyCtrl", function($scope, $timeout) {
  $scope.charts = [{
    height: 0,
    x: 10,
    width: 80,
    color: "red"
  }, {
    height: 100,
    x: 110,
    width: 80,
    color: "blue"
  }, {
    height: 100,
    x: 210,
    width: 80,
    color: "purple"
  }, {
    height: 100,
    x: 310,
    width: 80,
    color: "green"
  }]

  $timeout(function() {
    for (var i = 0; i < 4; i++) {
      $scope.charts[i].height = 100 + Math.floor(Math.random() * 100);
    }
  }, 1)
})