在angularjs中没有调用$ watch

Question

您好我是角色的新手我正在尝试使用ng-click指令和$ watch函数进行更新。第一次点击它会更新，但第二次没有更新。露出我的英语和小知识这是我的代码。

angular.module('charts', [])
.factory('socket', ['$rootScope', function ($rootScope) {

    var safeApply = function(scope, fn) {
      if (scope.$$phase) {
        fn(); // digest already in progress, just run the function
      } else {
        scope.$apply(fn); // no digest in progress, run with $apply
      }
    };

    var socket = io.connect('http://localhost:5000/');

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          safeApply($rootScope, function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          safeApply($rootScope, function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      },
      disconnect: function () {
        socket.disconnect();
      },
      socket: socket
    };

    }])
.controller('mainCtrl',['$scope','socket', function AppCtrl ($scope, socket) {
    $scope.options = {width: 500, height: 300, 'bar': 'aaa'};
    $scope.data = {"angular":12,"js":15};
    $scope.hovered = function(d){
        $scope.barValue = d.name;
        //$scope.$apply();
    };
    $scope.barValue = 'None';
}])
.directive('barChart', function(){
    var chart = d3.custom.barChart();
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="chart"></div>',
        scope:{
            height: '=height',
            data: '=data',
            hovered: '&hovered'
        },
        link: function(scope, element, attrs) {
            var chartEl = d3.select(element[0]);
            chart.on('customHover', function(d, i){
                scope.hovered({args:d});
            });

            scope.$watch('data', function (newVal, oldVal) {
                console.log(newVal);
                chartEl.datum(newVal).call(chart);
            });

            scope.$watch('height', function(d, i){
                chartEl.call(chart.height(scope.height));
            })
        }
    }
})
.directive('chartForm', function(){
    return {
        restrict: 'E',
        replace: true,
        controller: function AppCtrl ($scope, socket) {
            $scope.start = function(d, i) {
                $scope.btnIsDisabled = true;
                socket.on("connected",function(r){ console.log('breakpoint 1');/*console.log(r);*/ });
                socket.on("new tweet", function(tweet) {
                    var hashtags = tweet.entities.hashtags;                                                
                    if(hashtags.length) {
                        _.each(hashtags, function(hashtag) {
                            hashtag = hashtag.text.toLowerCase();
                            // if(hashtag == 'food' || hashtag == 'pizza' || hashtag == 'samosa') {
                            //     console.log(hashtag);
                                if(_hashtags[hashtag]) {
                                    _hashtags[hashtag]++;
                                }
                                else {
                                    _hashtags[hashtag] = 1;
                                }
                            //}
                        });
                    }
                    num_tweets++;                
                });  
            };

            $scope.update = function(d, i) {   
                $scope.safeApply = function(fn) {
                  var phase = this.$root.$$phase;
                  if(phase == '$apply' || phase == '$digest') {
                    if(fn && (typeof(fn) === 'function')) {
                      fn();
                    }
                  } else {
                    this.$apply(fn);
                  }
                };
                $scope.safeApply( function() {
                    console.log(JSON.stringify(_hashtags));
                    $scope.data = _hashtags;
                });
            };
        },
        template: '<div class="form">' +
                'Height: {{options.height}}<br />' +
                '<input type="range" ng-model="options.height" min="100" max="800"/>' +
                '<br /><button ng-click="start()" ng-disabled="btnIsDisabled">Start</button>'+
                '<button ng-click="update()" ng-disabled="false">Update Data</button>' +
                '<br />Hovered bar data: {{barValue}}</div>'
    }
});