AngularJS mehrfache Verwendung von Controller und rootScope

Ich möchte einen Controller für zwei separate HTML-Elemente verwenden und mit dem $ rootScope die beiden Listen synchron halten, wenn eines bearbeitet wird:

HTML

<ul class="nav" ng-controller="Menu">
    <li ng-repeat="item in menu">
        <a href="{{item.href}}">{{item.title}}</a>
    </li>
</ul>

<div ng-controller="Menu">
    <input type="text" id="newItem" value="" />
    <input type="submit" ng-click="addItem()" />
    <ul class="nav" ng-controller="Menu">
        <li ng-repeat="item in menu">
            <a href="{{item.href}}">{{item.title}}</a>
        </li>
    </ul>    
</div>

JS

angular.module('menuApp', ['menuServices']).
    run(function($rootScope){
        $rootScope.menu = [];
    });

angular.module('menuServices', ['ngResource']).
    factory('MenuData', function ($resource) {
        return $resource(
            '/tool/menu.cfc', 
            {
                returnFormat: 'json'
            },
            {
                getMenu: {
                    method: 'GET',
                    params: {method: 'getMenu'}
                },
                addItem: {
                    method: 'GET',
                    params: {method: 'addItem'}
                }
            }
        );
    });

function Menu($scope, MenuData) {

    // attempt to add new item
    $scope.addNewItem = function(){
        var thisItem = $('#newItem').val();

        MenuData.addItem({item: thisItem},function(data){
            $scope.updateMenu();
        });
    }   

    $scope.updateMenu = function() {
        MenuData.getMenu({},function(data){
            $scope.menu = data.MENU;
        });         
    }

    // get menu data
    $scope.updateMenu();
}

Wenn die Seite geladen wird, werden beideUL und dasDIV zeigen Sie den korrekten Inhalt von der Datenbank an, aber wenn ich das benutzeaddNewItem() Methode nur dieDIV wird aktualisiert.

Gibt es eine bessere Möglichkeit, meine Logik zu strukturieren, oder kann ich etwas tun, um das sicherzustellen?$scope.menu in demUL wird gleichzeitig aktualisiert?

Hier ist ein Beispiel für etwas Ähnliches:http://plnkr.co/edit/2a55gq

Antworten auf die Frage(3)

Ihre Antwort auf die Frage