why is this controller not updating the view after using $Post method using AngularJs?

Question

In my angular app I have a controller as follows:

mainCtrl.controller('mainController', function($scope, $http, Comment) {
        // GET ALL COMMENTS ====================================================
        Comment.getQuestion()
            .success(function(data) {
                $scope.qa = data;
            });

            $scope.qusdata = {};

            //Post Question 
            $scope.postquestion = function() {

            $scope.loading = true;

            Comment.PostQuestion($scope.qusdata)
                .success(function(data) {
                    console.log(data);
                    $scope.response = data;
                    $scope.loading = true;
                    // if successful, we'll need to refresh the comment list
                    Comment.getQuestion()
                        .success(function(getData) {
                            console.log(getData);
                            $scope.qa = getData;
                            $scope.loading = false;
                        });

                })
                .error(function(data) {
                    console.log(data);
                });
            };

        });

Within the view I have list as follows:

<div class="container"  ng-controller="mainController" >
        <div class="row"  ng-hide="loading" ng-repeat="q in qa.data" >
            <div class="col-md-12 col-xs-12 col.sm.12" >
                <div class="artist-data pull-left" style = "background-color:#BEB7B7;">
                    <!-- Div for user image -->
                    <div class="artst-pic pull-left">
                        <img width = 100px; height:60px; ng-src="{{image(q.userID)}}" alt="" class="img-responsive"/>
                    </div>
                    <!-- Div for voting for question-->
                    <div style = "margin-top:85px; margin-left: 10px;">
                        <div class=" pull-left" >
                            <a class="btn btn-xs btn-hover btn-primary" ng-click = "upVote(q.id)">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </a>
                            <input  class = "text" ng-model="q.votes"></input>
                            <a class="btn btn-xs btn-hover btn-danger" ng-click = "downVote(q.id)">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </a>
                        </div>
                    </div>
                    <!-- Div for imformation about the user -->
                    <div class="artst-prfle pull-left">
                        <div class = "col-md-12" >
                            <div class="art-title">
                                <p ng-bind-html = "q.question | emoji">{{ q.question}}</p>
                                <span class="artst-sub" >By 
                                    <span class="byname" >{{ q.users.first_name }} {{ q.users.last_name }}</span> 
                                    <span class="daysago">around {{ q.created_at }}</span>
                                </span>
                                <span>
                                    <div>
                                        <a class="glyphicon glyphicon-comment"></a> 
                                        <a ng-click="select(q.id)" >Answer</a>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </div>

Now when I click on the Add Question button in the template then, It calls the postquestion method and a successful POST call is made to the REST api. But the view does not get updated until it is refreshed. What am I doing wrong?

Answer 1

try to use this post method:

 $scope.postquestion = function() {

            $scope.loading = true;

            Comment.PostQuestion($scope.qusdata)
                .success(function(data) {
                    console.log(data);
                    $scope.response = data;
                    $scope.loading = true;
                    // if successful, we'll need to refresh the comment list
                    Comment.getQuestion()
                        .success(function(getData) {
                            $scope.qa=null;
                            console.log(getData);
                            $scope.qa = getData;
                            $scope.loading = false;
                            $scope.$apply();
                        });

                })
                .error(function(data) {
                    console.log(data);
                });
            };