pcnate

        <div class="col-xs-12"> <!-- floating alerts -->
          <div class="row">
            <div class="col-xs-12">
              <div class="row" floating-alert> <!-- alert row -->
                <div ng-cloak ng-repeat="alert in alerts.alerts track by $index">
                  <div ng-if="alert.floating == 'true'" class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
                    <div class='alert' ng-class="[ alert['type'] ]" role='alert'>
                      <button type='button' class='close' ng-click="alerts.close( $index, 'index' )" aria-label='Close'><span aria-hidden='true'>&times;</span></button>
                      <strong><i class="fa" ng-class="[ alert['icon'] ]"></i>&nbsp;{{ alert.message }}</strong>
                    </div>

pcnate

//---------------------------------------------------------------------------------------------------------------------------------------------------
// directive to allow item to scroll with top of page or stay where it belongs
  .directive( 'floatingAlert', function( $document, $window ) {
    return {
      restrict: 'A',
      link: function($scope, $element) {
        $document.bind('scroll', function() {

          var docViewTop = $window.pageYOffset;
          var docViewBottom = docViewTop + $window.innerHeight;