Passing parameter to another view from same controller not working (ionic and angular js)

Question

I have a view products, that is populated with data from the controller ProductsCtrl. When one of these products is clicked, the id is passed to a function in the controller.

Inside this function, another function in the ProductsService is called, making a http request. The function in service passed the data from the response to the function in the controller. From there I try to change the state to another view (product details), passing along these data.

Code so far:

Controller:

$scope.gotoproduct = function (product_id) {
        console.log("the product id "+product_id); //ok

        ProductService.productdetail(product_id).then(function(data) {
           // $scope.userdata = data;
            console.log("@product detail controller funct")
            console.log(data);
            console.log("prape id -- "+product_id);
            $state.go('product_detail', {the_data: data})
        }).catch(function(errorResponse) {
            console.log('error', errorResponse);
        });

    }

Service:

service.productdetail = function(product_id){
        console.log("@product detail service funct");
        return httppostrequest($http, producturl, productdata);
    }

State declaration:

.state('product_detail', {
          url: '/products/detail',
          parent: 'app',
          params: {the_data: null},
          views: {
              'products-tab@app': {
                  templateUrl: 'templates/product.detail.html',
                  controller: 'ProductsCtrl as product'
              }
          }
      })

The view (i kept it simple to only display the data first):

<ion-view view-title="{{::products.messages.title}}" >
    <ion-content>
        <div class = "card">
            <div class = "item item-avatar">
                <img src = "my-image.png">
            </div>

            <div class = "item item-body">
                <img class = "full-image" src = "my-image.png">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget
                pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci.
                Nam tristique elit massa, quis faucibus augue finibus ac.
            </div>
        </div>

        <p>{{product.the_data}}</p>
    </ion-content>
</ion-view>

Everything executes normally. The id is passed to the controller, then to the service. The service makes the request and passed the response correctly to the controller. The change of state works and the view changes to product detail. But no data are displayed. One of my theories involves the fact that angular is asynchronous. Maybe the state changes before the data are passed. However I tried putting static data and still did not display anything.