AngularJS : Service for data between controllers

Question

I have a page with a main controller and a nested controller for showing details about a product. I want to use a a service in angular to call the server, retrieve a data object and hold that data object. The main controller will call the service to fetch the data and the details controller needs to know it was updated and then access the data. My service looks like this:

.service("productService", function ($http, $q) {
    var product = {};
    //interface that is returned
    return ({
        fetchProduct: fetchProduct,
        clearProduct: clearProduct,
        product: product
    });

    function fetchProduct(ID) {
        var request = $http({
            method: "get",
            url: "/online/productdata.ashx?itemID=" + ID,
            params: {
                action: "get"
            }
        });

        return (request.then(handleSuccess, handleError));
    };

    function clearProduct() {
        product = {};
    };

    // Transform the error response, unwrapping the application dta from
    // the API response payload.
    function handleError(response) {

        // The API response from the server should be returned in a
        // nomralized format. However, if the request was not handled by the
        // server (or what not handles properly - ex. server error), then we
        // may have to normalize it on our end, as best we can.
        if (
            !angular.isObject(response.data) ||
            !response.data.message
            ) {
            return ($q.reject("An unknown error occurred."));
        }
        // Otherwise, use expected error message.
        return ($q.reject(response.data.message));
    };

    // I attempt to transform the successful response and unwrap the application data
    // from the API response payload.
    function handleSuccess(response) {
        product = response.data;
        console.log("Found Data: " + angular.toJson(response.data))
        return (response.data);
    };
})

In my main controller I set a scope object to the service like this: $scope.SelectedProduct = productService;

When the user clicks the button to show the product it is called via the $scope handle: $scope.SelectedProduct.fetchProduct(ID);

The details controller has the same assignment for the $scope.SelectedProduct. I am new to using services but what I understood is that angular would bind to the service object and changes to the property product would trigger binding to any updates. That is not happening - in fact I do see the data after the fetch operation. In the service I have a console.log on the returned data and it is showing the correct data. However the product property is not getting updated. Can someone tell me what I am doing wrong please? Neither controller has access to the data after it is fetched. I understand that I am getting back a promise but the data is never there even after a timeout check.

Answer 1

Try it with a factory instead of a service.

AngularJS: Factory vs Service vs Provider