a spinner directive using bootstrap modal and font-awesome fonts

spinner-directive.js

(function() {
    var app = angular.module('mcbSpin', [])
        .directive('spinner', [Spinner]);

    function Spinner() {
        return {
            restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
            scope: {
                //@ reads the attribute value, = provides two-way binding, & works with functions
                show: '@',
            },
            template: '<div id="spinnerModal" class="modal fade">' +
                '<div class="modal-dialog spinner">' +
                '<div class="modal-content">' +
                '<div class="modal-body">' +
                '<i class="fa fa-spinner fa-spin fa-5x"></i>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>',
            link: function(scope, element, attrs) {
                    scope.$watch('show', function(n, o) {
                        if (n === 'true') {
                            $('#spinnerModal').modal('show');
                            console.log(o + '-->' + n);
                        } else if(n === 'false') {
                            $('#spinnerModal').modal('hide');
                            console.log(o + '-->' + n);
                        }
                    }, true);
                } //DOM manipulation
        };
    }
})();