Angular Watch Firing

directive.js

define(function () {

  'use strict';
  angular.module('qualifier-directives', [])
    .directive('qualifierStatistics',
    function () {

      function processStatistics($scope, mode) {

        // sort the normalized statistics in decending order based on the count
        var normalized = _.map($scope.statistics, function (statistic) {
            return { name: statistic.name, count: statistic[mode], total: $scope.$parent.subscriber[mode] };
          }),
          sorted = _.sortBy(normalized, function (item) { return _.parseInt(item.count); }).reverse(),
          size = _.size(sorted),
          sum = 0;

        if (size > 12) {

          sum = _.reduce(_.pluck(sorted.slice(12, size), 'count'), function (sum, value) {
            return sum + _.parseInt(value);
          });
          sorted.splice(12, size);
          sorted.splice(12, 0, { name: 'Others', count: sum, total: $scope.$parent.subscriber[mode] });
        }

        return sorted;
      }

      function link($scope, $element, attrs) {

        var outerDivTemplate = $('<div></div>').addClass('progress-bar'),
          innerDivTemplate = $('<div></div>'),
          innerSpanTemplate = $('<span></span>').addClass('sr-only'),
          processed = null,
          outer = null,
          percent = 0,
          inner = null,
          title = '',
          firstTime = true,
          i = 0;

        $scope.$watch('statistics', function () {

          var colorSize = $scope.$parent.colorClasses.length;
          processed = processStatistics($scope, attrs.mode);
          firstTime = true;
          i = 0;
          if (_.size(processed) > 0) {

            _.each(processed, function (statistic) {

              outer = outerDivTemplate.clone();
              outer.addClass($scope.$parent.colorClasses[i % colorSize].replace('background', 'progress-bar'));
              percent = Math.round(statistic.count / statistic.total * 100);
              outer.width(percent + '%');

              if (statistic.name === 'Others') {
                title = 'Others';
              }
              else {
                title = statistic.name;
              }

              inner = innerDivTemplate.clone().attr('title', title);
              if (percent > 3) {
                inner.text(percent + '%');
              }
              else {
                inner.html('&nbsp;');
              }

              outer.append(inner);
              outer.append(innerSpanTemplate.clone().text(percent + '%'));

              if (firstTime) {
                $element.empty();
                firstTime = false;
              }
              $element.append(outer);
              i++;
            });
          }
          else {

            inner = innerDivTemplate.clone().addClass('text-center').text('No Statistics Available');

            if (firstTime) {
              $element.empty();
              firstTime = false;
            }
            $element.append(inner);
          }
        });
      }

      return {
        restrict: 'A',
        link: link,
        replace: false
      };
    });
});

snippet.html

<!-- snip -->

        <div class="used-content-height-item panel-body">
          <div class="clearfix">
            <div class="pull-left margin-right-10">
              <img src="static/images/subscriber.png" title="Subscribers" alt="Subscribers"/>
            </div>
            <div class="progress modal-open" data-qualifier-statistics data-mode="subscribers"></div>
          </div>
        </div

<!-- snip -->

          <tbody class="qualifier-statistics-grid-body webkit-scrollbar-fix" style="border: none !important;">
            <tr data-ng-if="qualifier.groupStatistics.length === 0">
              <td class="width-100p no-rows text-center" colspan="6">No qualifier statistics found</td>
            </tr>
            <tr data-ng-repeat="statistic in statistics = (qualifier.groupStatistics)">
              <td class="width-16p text-center">
                <div class="badge {{ $parent.colorClasses[$index % $parent.colorClasses.length]; }}">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
              </td>
              <td class="width-16p ">{{ statistic.name }}</td>
              <td class="width-16p text-right">{{ statistic.subscribers | number }}</td>
              <td class="width-16p text-right">{{ statistic.subscribers / $parent.subscriber.subscribers * 100 | number:1 }}%</td>
              <td class="width-16p text-right">{{ statistic.devices | number }}</td>
              <td class="width-16p text-right">{{ statistic.devices / $parent.subscriber.devices * 100 | number:1 }}%</td>
            </tr>
          </tbody>