ng-directive

directive.js

 /**
     * Toast directive. Ex: <toast msg="Some message." style="success|info|warning|danger"></toast>
     */
    .directive('toast', [function () {
        return {
            restrict: 'E',
            template: function (elem, attr) {

                return '<div class="toast">\n' +
                    '    <div class="{{ style }}" role="alert">{{msg}}</div>\n' +
                    '</div>';

            },
            scope: {
                msg: '=msg',
                style: '=style'
            },
            link: function (scope, element, attrs) {

                scope.style = 'alert alert-' + scope.style;

            }
        };
    }])