Cannot update a $scope object without a page refresh

Question

I'm using an Angular Service to return a promise object, then I'm adding to the data, but the view is not update with the newly added element without a page refresh.

How can I make the $scope.articles refresh in the view without a page refresh?

View:

<table class="table table-border">
    <tr>
        <th>Title</td>
        <th>Author</th>
        <th>Date</th>
        <th>Delete</th>
        <th>View</th>
     </tr>
     <tr data-ng-repeat="article in articles">
        <td data-ng-bind="article.title"><a data-ng-href="/articles/{{article._id}}">{{article.title}}</td>
        <td data-ng-bind="article.user.displayName">{{article.user.displayName}}</td>
        <td>{{article.created | date:'mediumDate'}}</td>
        <td><button class="btn btn-warning" ng-click="remove(article)">Delete</td>
        <td><button class="btn btn-danger" ui-sref="listArticles.viewArticle({articleId: article._id})">View</td>
     </tr>

</table>

Controller:

angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles', 'myAppointment', 
    function($scope, $stateParams, $location, Authentication, Articles, myAppointment) {
    $scope.authentication = Authentication;
    $scope.articles = {};

    $scope.myAppointment = myAppointment;

    $scope.find = function() {
        $scope.articles = Articles.query();
    };
    //initially runs to fill the data on the page. 
    $scope.find();

    $scope.create = function() {
        var article = new Articles({
            title: this.title,
            content: this.content
        });
        article.$save(function(response) {
            //I'm trying to run $scope.find() again to refresh the data in $scope.articles - it shows up in the console but not in the view?
            $scope.find();
            console.log($scope.articles);
            $location.path('articles');

            $scope.title = '';
            $scope.content = '';
        }, function(errorResponse) {
            $scope.error = errorResponse.data.message;
        });
    };

EDIT

added the Articles resource:

'use strict';

//Articles service used for communicating with the articles REST endpoints
angular.module('articles').factory('Articles', ['$resource',
    function($resource) {
        return $resource('articles/:articleId', {
            articleId: '@_id'
        }, {
            update: {
                method: 'PUT'
            }
        });
    }
]);

also the server controller processing and responding to the request in Node is:

exports.list = function(req, res) {
    Article.find().sort('-created').populate('user', 'displayName').exec(function(err, articles) {
        if (err) {
            return res.status(400).send({
                message: errorHandler.getErrorMessage(err)
            });
        } else {
            console.log(articles);
            res.json(articles);
        }
    });
};

Does this need a resolve? Would appreciate if someone could help as I don't know how to use resolves.

EDIT:

I'm now wondering whether this is a routing issue as I have the create state a a child of the list state - perhaps??

function($stateProvider) {
        // Articles state routing
        $stateProvider.
        state('listArticles', {
            url: '/articles',
            templateUrl: 'modules/articles/views/list-articles.client.view.html' 

        }).
        state('listArticles.createArticle', {
            url: '/create',
            templateUrl: 'modules/articles/views/create-article.client.view.html'

Thanks

Answer 1

Change your find function to this

$scope.find = function() {
    Articles.query({}, function (response) {
        // Will update scope, function will be called if http status === 200
        $scope.articles = response;
    }, function () {
        // This is a error function will called if http status != 200
    });
};

Query function will not return anything, you need to set data in a callback, so you can pass two functions as success and error or use a promise with two functions too:

$scope.find = function() {
    Articles.query().$then(function (response) {
        // Will update scope, function will be called if http status === 200
        $scope.articles = response;
    }, function () {
        // This is a error function will called if http status != 200
    });
};

Data is set when request is complet so scope will be updated