javascript - routeProvider テンプレートを使用する場合のルート テンプレートでの AngularJS 双方向バインディング

Question

サイドバーに To Do メッセージのリストと処理済みメッセージのリスト (タブで移動) が表示されるアプリがあり、それをクリックすると、サイドバーの右側のメイン セクションにメッセージの詳細が表示されます。右側のビューには、ユーザーがメッセージの詳細を入力し、ボタンを押すと、メッセージが to-do から処理済みに移動するフォーム入力がいくつかあります。

  <div id="sidebar" data-ng-controller="MessageController">
    <ul class="nav nav-tabs" id="message-tab">
      <li><a href="#to-do" data-toggle="tab">To-do</a></li>
      <li><a href="#processed" data-toggle="tab">Processed</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="to-do">
        <table class="table table-hover">
            <tr data-ng-repeat="message in todoMessages | orderBy: id">
              <td>
                  <a href="#/todo/{{message.id}}" class=""><span>{{message.name}}  </span></a> <small style="float:right;">{{message.type}}</small>
              </td>
            </tr>

       </table>

      </div>
      <div class="tab-pane" id="processed">
        <table class="table table-hover">

            <tr data-ng-repeat="message in processedMessages | orderBy: id">
              <td>
                <a href="#/processed/{{message.id}}" class=""><span>{{message.name}}  </span></a> <small style="float:right;">{{message.type}}</small>
              </td>
            </tr> 

       </table>

      </div>
    </div>
  </div>

  <div id="main-panel">
    <div class="message-preview " data-ng-view="">
    </div>            
  </div>

私が抱えている問題は、右側のメイン セクションが ng-view を使用し、URL ハッシュが変更されたときにテンプレートを提供する $routeProvider を使用していることです。テンプレート ビューで $scope オブジェクトを更新しようとすると、サイドバーのリストが更新されません。

app.js

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

app.config(function ($routeProvider) {
$routeProvider
    .when('/todo/:messageId',
                    {
            controller: 'MessageController',
            templateUrl: 'app/partials/todoView.html'
                    })
     .when('/processed/:messageId',
                    {
            controller: 'MessageController',
            templateUrl: 'app/partials/processedView.html'
                    })
    .otherwise({ redirectTo: '/' });
});

ただし、サイドバーにある同じマークアップをテンプレート ビューに配置すると、スコープ オブジェクトを操作するとリストが更新されることがわかるので、双方向バインディングは適切に機能します。

私は何を間違っていますか? ng-controller を使用してサイドバーを適切に更新するにはどうすればよいですか?