Angular Directive-Scope mistery

HTML

<div ng-app="objectMutation" 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>

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() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var update = function(newValue, oldValue) {
                element.unbind('click').bind('click', function() {
                    scope.$apply(function() {
                        scope.list1 = {};
                        scope.list2.length = 0;
                    });
                });
            };
            update();
        }
    };
})