Fadein and Fadeout with Angularjs

Question

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

Div "chapada" 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, is this really the best way to implement it? If not, what is the most appropriate way to deal with this issue of warnings (Alerts), which I believe is trivial?