Angular ng-repeat does not update after notifying Factory modified model

Question

In my Angular application, I have a simple factory notification that allows me to store and receive information that I want to pass to the user:

(function() {
    'use strict';

    angular
        .module('peaches')
        .factory('NotificationFactory', factory);

    // factory.$inject = ['dependencies'];

    /* @ngInject */
    function factory() {

        var messages = [];

        var service = {
            postAlert: postAlert,
            getAlerts: getAlerts,
            deleteAlert: deleteAlert
        };

        return service;

        function postAlert(alert) {
            messages.push(alert);
            if (alert.duration) {
                setTimeout(function() {
                    deleteAlert(alert);
                }, alert.duration)
            }
        }

        function getAlerts() {
            return messages;
        }

        function deleteAlert(alert) {
            messages.splice(messages.indexOf(alert), 1);
        }
    }
})();

As you can see in the function postAlert, I want to be able to delete the notification, if the specified notification has a property duration, after the durationnumber of milliseconds.

It is assumed that some types of notifications automatically disappear after a few seconds, and do not require the closure of the interaction.

This is an example notification:

var reportSaved = {
    msg: "Report saved.",
    type: "success",
    duration: 1500
}

, setTimeout duration, , ( ), ng-repeat deleteAlert factory.

HTML:

<div class="notification" ng-repeat="alert in vm.alerts(); track by $index" ng-cloak>
    <i ng-if="alert.type === 'notification'" class="fa fa-spinner"></i><i ng-if="alert.type === 'success'" class="fa fa-check-circle"></i> {{alert.msg}}
</div>

?

Answer 1

angular $timeout setTimeout. , $timeout , ng-repeat .