Angular one-time binding on object keys? One-time add like button - angularjs

Question

Goal: Like button only adds once using Angular.
Theory: Angular's one-time binding will do the trick.
It works here on Angular Expression Doc and on the Plunker example
Problem: Doesn't work in my trials.
Here's the Controller info (from Codecademy's Book App exercise)
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg',
likes: 0,
dislikes: 0
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg',
likes: 0,
dislikes: 0
}
View Trial 1
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ ::product.likes}} </p> <!-- here's the damn pickle of a problem -->
<p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }} </p>
</div>
</div>
</div>
RESULT - The button doesn't add
View Trial 2
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ ::product.::likes}} </p> <!-- here's the damn pickle of a problem -->
<p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }} </p>
</div>
</div>
</div>
RESULT - No content shows, only Handlebars / Mustaches / Handlebar-Mustaches {{ }}

Answer 1

I tried implementing your code. The following works for me:
<div ng-repeat = 'product in products'>
<p ng-click="plusOne($index)"> + {{ product.likes}}</p>
<p ng-click="minusOne($index)"> + {{ product.dislikes }}</p>
</div>
Since products is an array, we need to iterate through each of its elements.
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg',
likes: 0,
dislikes: 0
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg',
likes: 0,
dislikes: 0
}];
$scope.plusOne = function(index){
if($scope.products[index].likes == 0){
$scope.products[index].likes++;
}
};
I am incrementing the value of likes only if it is 0. Hence it will get incremented only once.

Answer 2

Here's the quick error I see on your code. 1. remove the double colon (::) and change your + sign to -. See screenshot below:
https://i.gyazo.com/ae9d8bb8be57a7b9e9cf840d3f1d705b.png
Also, don't forget to attach your plus and minus properties on your scope(in your controller).
$scope.plusOne = function(index) {
$scope.products[index].likes += 1;
};
$scope.minusOne = function(index) {
$scope.products[index].dislikes += 1;
};

Answer 3

If I understand you correctly, you want the user to only be able to "like" or "dislike" a product once.
One-time binding is used to have the view only watch a value until it is defined, and then stop watching it. The main purpose it to not add extra watches when you are binding data that won't be changing to your view.
In the case of ng-click, the expression is not watched using a $watch, but rather, re-evaluated every time the button is clicked. Even if it worked with one-time and the expression was only evaluated once, that expression would still be used every time the button clicked.
You need to be tracking whether the user has already "liked" a product or not. You can then check that in your plusOne and minusOne functions, and simply short-circuit them if they've already been fired.
Alternately, you could simply have plusOne and minusOne simply replace themselves with empty functions after they fire, like so:
$scope.plusOne = function(index) {
// Do stuff...
// This function disables itself after it fires once
$scope.plusOne = function() {};
};