To bind D3 in angular

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div ng-controller="MainCtrl">
  <d3-bars data="data" max="max"></d3-bars>
    <table>
      <thead>
        <tr><th colspan="4">{{ greeting }}</th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in data">
          <td>Name:</td>
          <td>
              <input ng-model="obj.name" type="text" placeholder="Name">
          </td>
          <td>Score</td>
          <td>
              <input ng-model="obj.score" type="number" min="1" max="{{ max }}" placeholder="Score">
          </td>      
      </tbody>
    </table>
</div>

JavaScript

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

app.controller('MainCtrl', ['$scope', function($scope){
    $scope.greeting = "Resize the page to see the re-rendering";
    $scope.data = [
        {name: "Gus", score: 98},
        {name: "Ari", score: 96},
        {name: 'Q', score: 75},
        {name: "Loser", score: 48}
    ];
    $scope.max = 500;
}]);

app.directive('d3Bars', ['$window', function( $window ) {
    return {
      restrict: 'EA',
      scope: {
          data: '=',
          max: '='
      },
      link: function(scope, element, attrs) {
          var margin = parseInt(attrs.margin) || 20,
          barHeight = parseInt(attrs.barHeight) || 20,
          barPadding = parseInt(attrs.barPadding) || 5;
          
          //console.log( max );
          var svg = d3.select(element[0])
          .append('svg')
          .style('width', '100%');
          
          // Browser onresize event
          window.onresize = function() {
              scope.$apply();
          };
                    
          // Watch for resize event
          scope.$watch(function() {
              return angular.element($window)[0].innerWidth;
          }, function() {
              scope.render(scope.data);
          });
          
          // watch for data changes and re-render
            scope.$watch('data', function(newVals, oldVals) {
               var width = d3.select(element[0]).node().offsetWidth - margin;
               var color = d3.scale.category20().domain(d3.range(20));
               var xScale = d3.scale.linear()
                  .domain([0, d3.max(newVals, function(d) {
                    return d.score;
                  })])
                  .range([0, width]);
                svg.selectAll('rect').transition()
                      .duration(1000)
                      .attr('width', function(d) {
                        return xScale(d.score);
                      })
                    .attr('fill',  function(d,i) { return color( ( d.score * 20 )...