javascript - Is this a good way to keep data in sync between two controllers? -

I have found a page layout with two controllers at the same time, keeping data displayed like a navigation on a base But browsers are stored in local storage and at least one other controller, which is bound by a route.

I created this short wire frame graphic, which shows the page layout:

The second controller performs functions like manipulating local stored data and adding a new item or removing the existing one. My goal is to keep data in sync, if anything has been added or deleted using 'list' ctrl, then it should be updated immediately if deleted by 'ManageListCrtl'.

By separating the local storage into it, the logic in a service that invests in the list, each controller hears on this event and updates the list of scopes.

It works fine, but I'm not sure that the best practice is

here's only a stripped version of the code containing the necessary parts:

  angular.module ('stored object example', ['local objectstorage']). Service ('StoredList', function ($ rootScope, LocalObjectStorage) {this.add = function (url, title) {// Add local storage log $ rootsecope. $ Broadcast ('StoredList', list);}; this.delete = Function (id) {// Local storage delete logic $ Rootscope. $ Broadcast ('StoredList', list);}; this.get = function () {// local storage argument meets};}); Angular.module ('StoredListExample'). Controller ('ListCtrl', function ($ scope, StoredList) {$ scope.list = StoredList.get (); $ scope. $ ('StoredList', function (event, data) {$ Scope.list = data;}) ;}); Angular.module ('StoredListExample'). Controller ('ManageListCtrl', function ($ Radius, $ location, StoredList) {$ scope.list = StoredList.get (); $ scope.add = function () {StoredList.add ($ Scope.url, $ scope.title ); $ Location.path ('/ management');} $ scope.delete = function (id) {StoredList.delete (id);} $ scope. $ On ('StoredList', function (event, data) { $ Scope.list = data;});});    
 
 
 There is nothing wrong in doing this in this way. Other options of the course are to inject only the root string between the two controllers and the pub / sub with the $ root scope. $ Broadcast and $ root scope. At $  
  angular.module ('(' Archived List ')). Controller ('List' Ctrl, Function ($ Range, $ Rootscope) {$ scope.list = []; $ Rootscope. $ ('Stalllist', Function (Event, Data) {$ scope.list = data;}); }); Angular.module ('StoredListExample'). Controller ('ManageListCtrl', function ($ radius, $ rootsecope, $ location) {$ scope.list = []; $ scope.add = function () {// psuedo, Not sure if this is what you are doing Are ... $ scope.list.push ({url: $ scope.url, title: $ scope.title}); $ scope.storedListUpdated (); $ location.path ('/ management');}; $ scope .delete = function (id) {var index = $ scope.list.indexOf (id); $ scope.list.splice (index, 1); $ scope.storedListUpdated ();}; $ Scope.storedListUpdated = function () {$ RootScope. $ Broadcast ('StoredList', $ scope.list);};});   
 In addition, you can get it through a messy but fun way through the General Parental Controller. Under which you will send $ 'PerlarStrredated' event from 'ManageList Ctrl' to the parent controller, then the parent controller will be broadcasted below 'LINDCtrl' on the same event. This will allow you to avoid using the $ root scope, but in the case of readability it will be very dirty as well as adding more events.