Bootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.

Switch to render view

javascript

// init angular app
var app = angular
  .module('myApp', [])
  .service('noty', ['$rootScope', function( $rootScope ) {
    
    var queue = [];
            
    return {
      queue: queue,
      add: function( item ) {
      	queue.push(item);
      	setTimeout(function(){
          // remove the alert after 2000 ms
          $('.alerts .alert').eq(0).remove();
          queue.shift();
        },2000);
      },
      pop: function(){
        return this.queue.pop();       
      }
    };
  }])
  .controller('ctrlApp', [ 'noty', '$scope', function( noty, $scope ) {
	$scope.noty = noty; // notify service
    
    /* test notify */
    noty.add({title:'Welcome',body:'Hello. This is an alert message'});
    
  }]);

// jquery functions and plugins
$(document).ready(function(){
  
  var scope = angular.element($('#myApp')).scope();
  
  // hook into angular noty service from Bootstrap jquery event
  $('.collapse').on('hide.bs.collapse',function(){
    scope.$apply(function(){
    	scope.noty.add({type:'danger',title:'Hey!',body:'That panel was just collapsed.'});
    });
  });
  
  $('#btn1').on('click',function(){
    scope.$apply(function(){
    	scope.noty.add({type:'warning',title:'Wow',body:'You`re a really good button clicker!'});
    });
  });
  
});

css

.panel-heading .panel-title:after{
   /* symbol for "opening" panels */
   font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
   content: "\e082";
   float: right;
   opacity:0.6;
}
.panel-heading.collapsed .panel-title:after  {
   /* symbol for "collapsed" panels */
   content: "\e081";
}
.pad-left {
   padding-left:15px;
}
.panel-item {
   padding:30px;
}
.panel .nav-tabs {
   margin-top:1px;
}
.panel .tab-pane {
   padding-bottom:15px;
}

.padding10,.btn.padding10 {
   padding:10px;
}
.padding20,.btn.padding20 {
   padding:20px;
}
.padding30,.btn.padding30 {
   min-width:110px;
   padding:30px;
   display:block;
}
.v-center-container {display:table;}
.v-center {
align-self: center;
	 display: flex;
  align-items: center;
  justify-content: center;
}

.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; }
.table-fixed tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}
.table-fixed thead {
  width: 97%;
}
.table-fixed thead th {
  height: 30px;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width:100%;
}
.table-fixed tbody td,
.table-fixed thead > tr> th {
  float: left;
  border-bottom-width:0;
}

.alerts {
 position:fixed;
 width:300px;
 right:30px;
 top:30px;
 z-index:10; 
}
.alerts>.alert-dismissable {
 position:relative;
 z-index:11;
 min-width:250px;
}

/* refresh plugin */
.refresh-container {
 position:absolute;
 top:0;
 right:0;
 background:rgba(200,200,200,0.25);
 width:100%;
 height:100%;
 display: none;
 text-align:center;
 z-index:4;
}

.refresh-spinner {
 margin-top:20%;
 opacity: 0.8;
}
/* end refresh plugin */

html

container

row

8.3%

12.5%

25%

33%

41.6%

50%

58.3%

66%

75%

83.3%

91.6%

100%

Hero

well

<form>

h1

h2

h3

h4

small

icon

table

<hr>

label

badge

[media]

"Lorem ipsum.."

Collapsible List Group

Bootply
Triveo
Behance

Notify Widget

Display Feedback

Use the AngularJS notify service to display growler like alerts to users. Alerts can be triggered from JavaScript, jQuery or directly in the scope of the included AngularJS app.

Collapsed Panel

"Click my heading to toggle me"

Wow, that's clever!

Collapsed Panel (info)

"Click my heading to toggle me"

This panel has the panel-info context.

Collapsible Linked List Group

44 Link 1 8 Link 2 23 Link 3 Link n..

Collapsed Panel (danger)

This panel has the panel-danger context so it works well for warnings or alerts.

Bootstrap AngularJS notify widget An example of an AngularJS service that can be used to display alerts for user notifications. This also how jQuery can be used to access the Angular $scope and apply updates.
0	1385 Bootstrap v3.1.1 Related snippets
angular angularjs scope snippet notify growler alert
Created by: znsstudio

Bootply

Bootstrap AngularJS notify widget

An example of an AngularJS service that can be used to display alerts for user notifications. This also how jQuery can be used to access the Angular $scope and apply updates.

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2