Refresh $scope automatically

Question

I am making an Angular Recipe App which retrieves data from a MySQL database and shows it on the screen. I have a function to "like" the recipe and it just plusses a count to the total likes. But everytime I like it, I have to refresh the page. I would like the scope to refresh it self. I have tried to use the push() function and the apply(), but I cant get it to work. Could someone help me please?

Dishes.html

<div class="" ng-controller='dishesController' >

<div class="dishPanel" ng-repeat='dish in dishes'>
    <div class="imageDishPanel">
        <img ng-src={{dish.link}} />
        <div class="slideBoxDown custFont titleDishPanel">
            {{dish.name}}
        </div>

        <div class="slideBoxUp">
            <div class=" infoTextDishPanel custFont">
                {{dish.info}}
            </div>
        </div>
    </div>

    <div class="loveDishPanel">
        <div ng-click='getID(dish.id, dish.likes)' class="heart"></div>
        <div class="likes custFont">{{dish.likes}} likes</div>
    </div> 
</div>

dishesController.js

app.controller('dishesController', ["$scope", "$http","dishesFactory", function($scope, $http, dishesFactory){
dishesFactory.getDataDishesFactory(function(data){
    $scope.dishes = data;
});

$scope.getID = function(id,like){
    $scope.likes  ={
        "id": id,
        "like": like
    };
    $scope.updateLike();
};

$scope.updateLike = function(){
    $http.post("php/updateLike.php",$scope.likes)
        .success(function(data){

        }
    );
};
}]);

EDIT: So what I am doing is show all the dishes in the database. Every dish has his "Like" count and Unique ID. If you press the 'like' it will call the getID(id, like); function and that one calls the updateLike function. The updateLike function will send the data (id and the like count) to the updateLike.php file and from there it will add 1 to the original count. The new count will be updated in the database. So on the html page I have to refresh it myself to see the new count. I would like to have the count to refresh it self. To do this i tried to push the data from the success callback in the controller with $scope.dishes[$scope.id].likes.push(data). So I have to push the new like count to the right dish because it is an array of dishes. But i am unable to push it to the right dish..

updateLike.php

<?php
require 'connect.php';
$data = json_decode(file_get_contents("php://input"));

$id =  $data->id;
$like = (int) $data->like;

$like++;
//$like = var_dump($data->like);

$query = "UPDATE `recipes` SET `likes`='$like' WHERE `id` = '$id' ";
mysql_query($query,$con);


echo $like;

Answer 1

You are making stuff too complicated. What you want do is simple.

Make the following changes

in html

         <div ng-click='getID(dish)' class="heart"></div>

in controller

$scope.getID = function(dish){
    //Ideally dish.like++ would be done here itself to give instant feeling
    like  ={
        "id": dish.id,
        "like": dish.like
    };
    $scope.updateLike(like, dish);
};

$scope.updateLike = function(like, dish){
    $http.post("php/updateLike.php",like)
        .success(function(data){
            dish.like=data.like;//under the impression the response have like count;
         }
        ).error(function(data){
           //and do dish.like-- if an error happens.
        });
 };

Answer 2

You aren't even keeping track of which dish was liked.

In the .success function, you'll need something like this;

.success(function () {
    // update the likes of the right dish object in $scope.dishes; dishObj.likes++;
});

As long as you do that, your view will update automatically. From what it looks like, you aren't really making most of two way data binding that AngularJS is best known for ;-)