AngularJSのserviceをつかって値を共有したいのですが...

Question

AngularJSのserviceを使用して値を共有したいのですが、下記のソースのように、ページ読み込み時にJSONデータをservice部分で設定します。

その後、ページに設置しているボタンでservice部分に設定されている変数の中身を書き換えても、実際のページのデータが、最初に読み込んだJSONデータのまま書き換わらないのですが、何が問題なのでしょうか？

AngularJS双方向データバインディングで動いているので、service部分のdataを更新すれば自動的に、ページ部分に設定している「$scope.return_data」の値も変わり、実際のページも新しい値に置き換わると思っていたのですが...

$intervalなどを使用して、再読み込みなどをしないとデータは更新されないのでしょうか？

AngularJSのバージョンは、v1.7.5です。

---

//service部分
module.service('sharedData', function () {

var data = {};

data = [
{id: "1",date: "2018-03-19 01:18"},
{id: "2",date: "2018-03-19 02:18"}
];

return {

return_data: data,
update_json: function () {

data = [
{id: "3",date: "2018-03-19 03:18"},
{id: "4",date: "2018-03-19 04:18"}
];

return data; //変更後の値を代入

}

};

});

//controller部分
module.controller('CNT1', function ($scope, sharedData) {

$scope.update_json = function () {

var res = sharedData.update_json();

alert("JSONを更新しました！");

}

});

module.controller('CNT2', function ($scope, sharedData) {

$scope.return_data = sharedData.return_data;

});

---

//ページの部分

<div ng-controller="CNT1"> <p>■CNT1■</p> <button ng-click="update_json()">JSON書き換え</button> </div> <p></p> <div ng-controller="CNT2"> <p>■CNT2■</p> <table> <tbody> <tr> <td align="center" nowrap="nowrap">ID</td> <td align="center" nowrap="nowrap">日付</td> </tr> <tr ng-repeat="data in return_data"> <td nowrap="nowrap">{{data.id}}</td> <td nowrap="nowrap">{{data.date}}</td> </tr> </tbody> </table> </div>

Answer 1

自己解決しました。

//controller部分に書かれている、

$scope.return_data = sharedData.return_data;

を、

$scope.return_data = sharedData;

としてやれば、serviceの値が変更になったときに、自動的にcontrollerの値も変更されるようになりました。