Angular share asynchronous data across controllers and bind to views

I have a service which I would like to use across multiple controllers. The services is defined like this:

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;
        });

      }
    }
  }
]);

I have a form, that uses the ProductFormController to retrieve product data when it's submitted. That controller looks like this:

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);
      });
    }

  }
]);

Then, I have an AppController, which should display certain sections when a product object exists in the Data service.

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

Within AppController, I have this line:

$scope.product = Data.product;

I would like the productInfo div to show whenever a product object exists in the Data service, but it seems that the variable never gets updated. I've seen this question, but do not believe the accepted answer actually answers the question:

Angular: share asynchronous service data between controllers