notificationBar.html

<div data-ng-repeat="message in messages" class="Response">
    <div class="Response" ng-class="message.msgType">
        <i ng-class="message.iconType"></i> <span class="i-name">{{message.message}}</span>
    </div>
</div>

notificationBar.js

'use strict';

app.directive("notificationBar", function () {
    return {
        // restrict: 'E', -- do not use restriction as element
        transclude: false,
        require: '^ngModel',
        templateUrl: 'notificationBar.html',
        scope: {
            errorMessage: '@',
            warnMessage: '@',
            successMessage: '@'
        },
        controller: function ($scope, $rootScope, $timeout) {
            var timeoutInterval = 10000; // 10s timeout
            $scope.messages = [];

            $scope.$watch('errorMessage + successMessage + warnMessage', function () {

                if ($scope.errorMessage.length > 0) {
                    addToMessages('Error','icon-remove',$rootScope.errorMessage);
                    $rootScope.errorMessage = '';
                    return;
                }

                if ($scope.successMessage.length > 0) {
                    addToMessages('Success','icon-ok',$rootScope.successMessage);
                    $rootScope.successMessage = '';
                    return;
                }

                if ($scope.warnMessage.length > 0) {
                    addToMessages('Warning','icon-asterisk',$rootScope.warnMessage);
                    $rootScope.warnMessage = '';
                    return;
                }
            });

            $scope.addMessage = function(){
                alert('Add a message')
            };

          function addToMessages(msgType,iconType, message){
                var msg ={
                            msgType: msgType,
                            iconType: iconType,
                            message: message
                        };

                $scope.messages.push(msg);
                setTimeoutOnMessage(msg);
            }

            function setTimeoutOnMessage(msg){

                $timeout(function() {
                    if(msg !==undefined){
                        $scope.messages.splice(msg, 1)
                    }
                }, timeoutInterval);
            }
        }
    }
});

notificationBarSpec.js

'use strict';
describe("notificationBarSpec", function(){
    var element;
    var $scope;
    var ctrl;

    beforeEach(module(app));
    beforeEach(inject(function($compile, $controller, $rootScope){
        var elm = angular.element(' <div style="clear:both;" data-asp-notification-bar data-success-message="{{successMessage}}" data-error-message="{{ errorMessage }}" data-warn-message="{{ warnMessage }}" >');
        $scope = $rootScope;
        element = $compile(elm)($scope);
        $scope.$digest();

        ctrl = element.controller("aspNotificationBar");
    }));

    describe("test", function(){
       it("When application start there should not be any messages", function(){
            ctrl.messages = jasmine.spy();

           expect(ctrl.messages).toBeDefined();
       }) ;
    });
})