FizzBuzz with directives

(function() {
  function isDiv5(num) {
    return !(num % 5);
  }

  function isDiv3(num) {
    return !(num % 3);
  }

  angular.module('fizz-buzz-example', []).

  controller('CountsCtrl', function($scope) {
    $scope.counts = {
      fizzBuzz: 0,
      fizz: 0,
      buzz: 0
    }
  }).

  directive('fizzBuzz', function() {
    return {
      restrict: 'A',
      link: function(scope, el) {
        scope.counts.fizzBuzz += 1;
        el.html('FizzBuzz!!');
      }
    }
  }).

  directive('fizz', function() {
    return {
      restrict: 'A',
      link: function(scope, el) {
        scope.counts.fizz += 1;
        el.html('Fizz!!');
      }
    }
  }).

  directive('buzz', function() {
    return {
      restrict: 'A',
      link: function(scope, el) {
        scope.counts.buzz += 1;
        el.html('Buzz!!');
      }
    }
  }).

  directive('fizzBuzzer', function() {
    return {
      restrict: 'A',
      compile: function(el) {
        el.children().each(function(i, child) {
          var num = parseInt(child.innerHTML, 10);

          if (isDiv3(num) && isDiv5(num)) child.setAttribute('fizz-buzz', '');
          else if (isDiv3(num)) child.setAttribute('fizz', '');
          else if (isDiv5(num)) child.setAttribute('buzz', '');
        });
      }
    }
  });

}());

<!DOCTYPE html>
<html ng-app="fizz-buzz-example">

  <head>
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="CountsCtrl">
    <h1 class='counts'>
      <ul class='small-block-grid-3'>
        <li>Fizzing: {{counts.fizz}}</li>
        <li>Buzzing: {{counts.buzz}}</li>
        <li>FizzBuzzing: {{counts.fizzBuzz}}</li>
      </ul>
    </h1>
    
    <ul fizz-buzzer>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
    </ul>
  </body>

</html>

h1.counts{
  background-color: black;
  color: white;
  margin-top: 0;
}

h1.counts li {
  padding: 5px 15px;
}

ul[fizz-buzzer] {
  list-style: none;
}