Angular共享控制器之间的异步数据并绑定到视图

Question

我有一个服务，我想在多个控制器上使用。服务定义如下：

app.factory('Data', ['$http',
  function($http) {

    var Data = this;
    var theProduct = {};

    return {
      product: function() {
        return theProduct;
      },

      getProduct: function(ext_id) {

        return $http.post('get_product', {
          product_id: ext_id
        }).success(function(data) {
          theProduct = data;
        });

      }
    }
  }
]);

我有一个表单，使用ProductFormController在提交时检索产品数据。那个控制器看起来像这样：

app.controller('ProductFormController', ['$scope', '$http', 'Data',
  function($scope, $http, Data) {

    /*
     * Get a product and all of it's data from the server
     */
    $scope.getProduct = function() {

      Data.getProduct($scope.extProductId).success(function(data) {
        console.log(data);
      });
    }

  }
]);

然后，我有一个AppController，当Data服务中存在产品对象时，它会显示某些部分。

<div class="row" id="productInfo" ng-show="product().id" ng-controller="AppController">/div>

在AppController内，我有这一行：

$scope.product = Data.product;

我希望productInfo div在Data服务中存在产品对象时显示，但似乎变量永远不会更新。我已经看到了这个问题，但不相信接受的答案实际上回答了这个问题：

Angular: share asynchronous service data between controllers