Ecommerce website not taking custom variables {{ }}

Question

I'm watching this video tutorial on building an e-commerce site with Angular and Moltin. I've gotten to the 19 minute mark where he begins creating the product.html view.

I'm not sure why, but I can console.log(product) just fine, but when I try to use variables like {{ product.title} in my product.html view, it doesn't show. Plain text shows up fine, and in my category.html view I can get my categories to ng-repeat using {{ category.title }} just fine.

I am not sure why I can log the product object, but the view will not render it.

Here's a link to my GitHub repo. Any help is appreciated.

Answer 1

There is a scope conflict being caused because you are declaring product to be your controller with the controllerAs statement here, and then setting $scope.product in your controller here

You need to resolve this conflict by either renaming $scope.product to something else in the controller, or renaming your controllerAs: 'product' statement.

I was able to make this work by changing controllerAs:'product' to controllerAs:'prod', but any solution resolving the conflict between the variable names should work.