Angular Directive-Scope mistery

HTML

<!DOCTYPE html>
<html ng-app="objectMutation">  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript">
      var App = angular.module('objectMutation', []);

      App.controller('oneCtrl', function($scope, $timeout) {
        $scope.list1 = {'name': 'AngularJS'};
        $scope.list2 = [{name: 'AngularJS'}];
      
        $scope.emptyMe = function() {
          $scope.list1 = {};
          $scope.list2.length = 0;
        };
      });
        
      App.directive('fubar', function() {
      debugger
          return {
            restrict: 'A',
            link: function(scope, element, attrs) {
              var update = function(newValue, oldValue) {
                $(element).unbind('click').click(function() {
                   scope.list1 = {};
                   scope.list2.length = 0;
                });
              };
              update();
            }
          };
        })
    </script>
  </head>  
  <body>
    <div ng-controller="oneCtrl">
        I'm an object: {{list1.name}} <br/>
        I'm an array: {{list2[0].name}} <br/>
      <button fubar>Change That - Directive</button>
      <button ng-click="emptyMe()">Change That</button>       
    </div>
  </body>
</html>