Edit Question - KnowledgeHub

Title Body

I want to use a controller on 2 seperated HTML elements, and use the $rootScope to keep the 2 lists in sync when one is edited: 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(); } When the page loads, both the UL and the DIV display the correct contents from the database, but when i

Tags (comma-separated) Cancel