FadeIn and FadeOut with AngularJS

I would like to know the best practice when displaying warnings to the user, using AngularJS. My scenario is basically the following: I have a div that represents all CRUD validations, inside my index.html. In a service "messages.service.js" I have a "showMsgErro" function that is called inside each controller, when it needs to display the message on the user page.

Div "plated" in index.html:

<div id="mensagens" class="alert alert-danger col-md-3" hidden>
         <a class="close" data-dismiss="alert" aria-label="close">&times;</a> 
         <strong style="font-size: 1.1em;">Erro ao salvar</strong><br>
         <span ng-repeat="msg in msgErro">{{msg}}<br></span>
    </div>

messages.service.js:

(function () {
        'use strict';

        angular
                .module('app')
                .factory('MensagensService', MensagensService);

        function MensagensService() {
            var service = {};

            service.mostraMsgErro = mostraMsgErro;

            return service;

            function mostraMsgErro() {
                $("#mensagens").fadeIn(function () {
                    window.setTimeout(function () {
                        $('#mensagens').fadeOut();
                    }, 2500);
                });
            }
        }

    })();

Is this approach correct? I mean, the best way to implement would really be this? If not, what is the best way to deal with this issue of alerts, which I believe to be trivial?