Angular JS update view from database

Question

Im building a social networking app using angular js. I have one doubt about binding the data. There is a timeline div, where all the recent posts gets displayed. Also, there is a status updater on top. Now, on page load, i fire an ajax($http) service to the DB and query all the posts, ill get the json data and i bind it to the div using ng-bind. suppose, the update the status now, how can i get the updated data to be displayed in my view without refreshing the page? I'm confused with this. Please help me out.

Thanks, Pavan

EDIT## - Some good folks had asked for code, here it is..im still facing issues and cannot bind my json data :( please help.

wall.controller('mainData', function($scope, $http)
{
$scope.status = {};
$scope.updatedStatus = {}; 
$scope.getStatus = function(){
  var uid = localStorage.getItem('_id');

    $http({
        method: "GET",
        url: "http://localhost:8000/profile/status/"+uid


    }).success(function (data, status, headers, config) {

        $scope.updatedStatus =data;            

    })

}

and the html part

 <div class="card" ng-controller="mainData"  ng-repeat="item in updatedStatus">
                            <div class="card-header">
                                <div class="media">
                                    <div class="pull-left">
                                        <img class="lv-img" src="img/profile-pics/2.jpg" alt="">
                                    </div>

                                    <div class="media-body m-t-5">
                                        <h2><a href="profile.html"       class="a-title">{{item.firstname+" "+item.lastname}}</a><small>{{item.record_time}}</small></h2>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="card-body card-padding">
                                <p>{{item.message}} </p>

                            </div>

                        </div>

JSON array that im getting from server

[
{firstname: "Pavan"
id: 1
lastname: "Kumar"
message: "This is my first update"
record_time: "10/16/2015, 8:32:16 PM"},
{firstname: "LOL"
id: 2
lastname: "test"
message: "This is my second update"
record_time: "10/16/2015, 8:32:16 PM"}
]

As i said, nothing is getting displayed after i add new values to the server nor data is getting displayed with present data. But the server is returned me json object, no errors are getting displayed. something wrong in ng-repeat may be? .any help is highly appreciated. :)

Answer 1

there is 3 places where the your data exist

1- the db

2- the javascript object

3- the html view

so if you did a binding the value in the javascript object will be the same as the html view

so if you changed the value in the javascript object it will be changed in the view in your question you said that

i fire an ajax($http) service to the DB

i don't know if you use angular $http service or another one but if you use angular function there will be no problem but if you use a non angular function to get the http request you need to call this function at the end of the callback function of the request

$scope.$apply();

to ask the digest loop to work and apply your changes on the view