AngularjJS not doing real refresh to the page on input data into the form

Question

I have a page where i display a list of titles (named suggestions in my app) directly read from a database using a service, and also a form to be able to input new titles. The problem is when I input a new title into the form, the new data is input into the database but it is not doing a real refresh on the page. Title is inserted twice into the database, it appears also twise on my view page, but if i insert one title and than i delete it manually from database and i insert a second title, the first title still appears.

here is my controller:

app.controller('HomeController', [
    '$scope',
    '$http',
    'get_suggestions',
    function($scope, $http, get_suggestions) {

        $scope.addSuggestion = function() {

            var titlu = $scope.newsuggest.title;

            if (!titlu || titlu === "") {
                $scope.eroare = "Enter suggestion";
                return;
            } else {

                $http.post('add_sugestii.php', {
                        title: $scope.newsuggest.title
                    }).success(function(data, status, headers, config) {

                        $scope.posts.push({
                            title: titlu,
                            upvotes: 0,
                            comments: []
                        });

                        $scope.newsuggest.title = '';
                        $scope.eroare = '';
                        $scope.$apply();
                        $route.reload();

                    })
                    .error(function(data, status) {
                        $scope.errors.push(status);
                    });

            }
        }


        get_suggestions.success(function(data) {
            $scope.posts = data;
        });

    }
]);

and here is a part of my view page:

    <div class="container">
    <div ng-repeat="post in posts | orderBy:'upvotes'" class="col-md-6" style="clear:both; padding-bottom:20px;">

        <p class="title">{{post.title}} </p>
        <p>Votes: {{post.upvotes}} </p>

    </div>
</div>

<div class="container">
    <div class="col-md-6" style="clear:both; padding-bottom:20px;">

        <form ng-submit="addSuggestion()" style="margin-top: 50px">
            <h3> Send a suggestion </h3>
            <div class="form-group">
                <input type="text" class="form-control" name="title" ng-model="newsuggest.title"></input>
                <div>{{eroare}}</div>
            </div>
            <button type="submit" ng-click="addSuggestion();" class="btn btn-primary">Send</button>
        </form>

    </div>
</div>

Answer 1

1. Inject $Route.

2. Look at this

   $scope.posts.push({
                           title: title,
                           upvotes: 0,
                           comments: []
                    });
   

Q What it does?

A you have a $scope called posts connected to your UI. So when you insert any data it gets connected to UI and so it will be visible to end user if refresh is not happening.

There are two different ways I can suggest you.

1. remove that code as guided above. Now $route.reload(); will cause a page refresh. so when page is refreshed make sure your API return a json of titles. Bind it with $scope.posts variable (may be used somewhere in angular's init method).

2. What I expect is lets say you have init method like this.

     $scope.pageInit=function(){
     // your API call to get data.
     //after getting a json list of title make sure you bind it to    $scope.posts variable.
      $scope.posts=titlesObj;
   }
   

Now rather than using $route.reload(), you need to call $scope.pageInit function in order to get updated data.

       $scope.newsuggest.title = '';
       $scope.eroare = '';
       $scope.$apply();
       // $route.reload();
       $scope.pageInit(); // this will fetch all updated data.

Answer 2

As you are already using $route.reload(); so the logic to reload is there, problem is that you have not injected $route in your controller. You are getting an error on browser console.

TypeError: Cannot read property 'reload' of undefined

Additionally you don't need to use $scope.$apply(); when reloading.

app.controller('HomeController', [
    '$scope',
    '$http',
    'get_suggestions',
    '$route', //Inject the route service 
    function($scope,
        $http,
        get_suggestions,
        $route) {
    }
]);

OR

Use $window.location.reload();, Do remember to inject $window in your controller.