为一个控制器拆分HTML组件会导致控制器停止工作

如果我创建了两个div，它们都由同一个控制器控制，Angular的控制器似乎会停止更新我的视图。

我已经组合了一个简单的示例来演示这一点。在JSFiddle上查看示例最简单，但我也在下面发布了代码。

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <form>
            <input type="text" ng-model="search.query"></input>
            <button ng-click="search.submit()">Submit</button>
        </form>
    </div>
    <div ng-controller="SomeOtherCtrl">
        {{sampleText}}
    </div>
    <div ng-controller="MyCtrl">
        <button ng-click="search.reset()">Reset Form</button>
    </div>
</div>

JS

var app = angular.module('App',[]);
function MyCtrl($scope)
{
    $scope.search = {
        query : 'foobar',
        submit : function() {
            this.query = 'Submitted';
            console.log(this.query);
        },
        reset : function() {
            console.log('resetting');
            this.query = '';
        }
    };
}
function SomeOtherCtrl($scope) {
    $scope.sampleText = 'other controller text';
}        

提交按钮工作正常，但是当我单击Reset按钮时，我看到resetting登录到控制台，但我的视图(表单输入)没有更新。

为什么会这样?在我目前正在进行的一个项目中，我不得不这样做，因为介于两者之间的某些HTML属于另一个控制器。我该如何解决这个问题?