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;
  outline: 1px solid transparent;
}
svg{
  transform:rotateX(180deg);
}

JavaScript

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

app.controller("MyCtrl", function ($scope, $timeout) {
    $scope.charts = [{height:0, x:10, width:80, color:"red"},
    {height:0, x:110, width:80, color:"blue" },
    {height:0, x:210, width:80, color:"purple"},
    {height:0, x:310, width:80, color:"green"}]
    
    $timeout(function(){
    for(var i = 0;i<4;i++){
    $scope.charts[i].height = 200 + Math.random() * 100;
    }
    }, 1)
})