AngularJS Example:

by aelamel

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="app.schoolAdmin">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div class="col-md-3"
         ng-repeat="(key, group) in vm.analyticsData">
      {{group | json}}
      <h1>{{ key }}</h1>
      <div class="charts-container">
        <div class="chart-block">
          <bar-graph data="group"></bar-graph>

        </div>
      </div>
    </div>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

angular
  .module('app.schoolAdmin', [])
  .controller('TodoCtrl', function ($scope) {
  	console.log('test');
    $scope.vm = {
    	analyticsData : [
      	{
        	label: 'A',
          value: 10
        },
        {
        	label: 'B',
          value: 20
        }
      ]
    }
  })
  .directive('barGraph', barGraph);

barGraph.$inject = ['$timeout'];

function barGraph ($timeout) {
  var scope;
  var element;

  return {
    link: link,
    restrict: 'EA',
    replace: true,
    scope: {
      data: '=',
      onClick: '&',
      methods: '='
    }
  };

  function init (data) {
    console.log("DATA", scope.data);
    console.log("REAL DATA", data);
  }

  function link (_scope, _element, attrs) {
    scope = _scope;
    element = _element;
    $timeout(function () {
      init(_scope.data);
    }, 0);

  }
};