javascript - 当 ng-model 值更改时，AngularJS View 不会更新

Question

请检查这个codepen，当点击按钮点击我重置名称时，输入的名称应该重置为空，当我在控制台上执行console.log时指令范围，我确实看到 name 设置为空字符串，但 View 中的值未更新。怎么了？

CodePen example

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($location, $scope) {
        $scope.name = 'myname';
        $('#clickMeToReset').on('click', function() {
          $scope.name = '';
        })
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button id="clickMeToReset">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

Answer 1

之后

$scope.name = '';

做一个

$scope.$apply();