Невозможно сбросить текстовое поле после ввода значения в Angular

Смотрите мой FIDDLE

Если я нажму кнопку "Click me", мои текстовые поля будут заполнены. Если я затем нажмите "Добавить новый элемент", они будут сброшены в пустые. Это то, что я хочу.

Однако, если я ввожу текст в текстовые поля, прежде чем нажимать на какие-либо кнопки, текстовые поля не изменяются, чтобы отражать объект GlossaryItem в области. Однако я вижу, что значение GlossaryItem является ожидаемым значением, когда "отладчик"; (так что GlossaryItem и значения текстового поля уже не совпадают).

Я не хочу использовать $ scope. $ Apply, если его можно избежать (это исправить мою проблему?).

<div ng-app="editGlossaryApp">
    <div ng-controller="MainCtrl">
        <div>
            <button ng-click="addNewDefinition()">Add New Item</button>
        </div>
        <div>
            <label>Term:</label>
            <div>
                <input value="{{GlossaryItem.Term}}" />
            </div>
        </div>
        <div>
            <label>Definition:</label>
            <div>
                <textarea rows="16" cols="60">{{GlossaryItem.Definition}}</textarea>
            </div>
        </div>
        <div>
            <button ng-click="fill()">Click Me</button>
        </div>
    </div>
</div>

var app = angular.module('editGlossaryApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.GlossaryItem = {
        Id: 0,
        Term: '',
        Definition: ''
    };

    $scope.addNewDefinition = function () {
        debugger;
        $scope.GlossaryItem = {
            Id: 0,
            Term: '',
            Definition: ''
        };
    };

    $scope.fill = function(){
        $scope.GlossaryItem = {
            Id: 1,
            Term: 'Test',
            Definition: 'Definition Definition Definition Definition Definition Definition'
        };
    }
}]);