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         
            replace: true,
            scope: {
                show: '@',
            },
            template:   ' <div class="modal fade">  ' +
            		'   <style>                                   ' +
			'     .spinner {                              ' +
			'         width      : 80px;                  ' +
			'         float      : none;                  ' +
			'         margin     : 0 auto;                ' +
			'         text-align : center;                ' +
			'     }                                       ' +
			'     .spinner i {                            ' +
			'         margin     : 0 auto;                ' +
			'         text-align : center;                ' +
			'         display    : block;                 ' + 
			'         width      : auto;                  ' +
			'         height     : auto;                  ' +
			'     }                                       ' +
			'   </style>                                  ' +
                        '   <div class="modal-dialog ">               ' +
                        '     <div class="modal-content spinner">     ' +
                        '       <div class="modal-body" >             ' +
                        '         <span>                              ' +
                        '           <i class="fa fa-spinner fa-spin fa-2x"></i> ' +
                        '         </span>                             ' +
                        '       </div>                                ' +
                        '     </div>                                  ' +
                        '   </div>                                    ' +
                        ' </div>                                      ' ,
            link: function(scope, element, attrs) {
                    scope.$watch('show', function(n, o) {
                        if (n === 'true') {
                            $('div[spinner]').modal('show');
                        } else if(n === 'false') {
                            $('div[spinner]').modal('hide');
                        }
                    }, true);
                } //DOM manipulation
        };
    }
})();