<pre><code class="lang-html"><html lang = "en"> <head> <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('bottomSheetController', bottomSheetController); function bottomSheetController ($scope, $mdBottomSheet) { $scope.openBottomSheet = function() { $mdBottomSheet.show ({ template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>' }); }; } </script> </head> <body ng-app = "firstApplication"> <div ng-controller = "bottomSheetController as ctrl" layout = "column"> <md-content class = "md-padding"> <form ng-submit = "$event.preventDefault()"> <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()"> Open Bottom Sheet! </md-button> </form> </md-content> </div> </body> </html> </code></pre>