Material Design

Bootom Sheet

HTML

<md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show as List</md-button>

CONTROLLER

$scope.showAlert = function (ev) {
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .textContent('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
};

INDEPENDENT

window.angularApp.controller("ListBottomSheetCtrl", [
    "$scope",
    "API_URL",
    "window",
    "jQuery",
    "$http",
    function($scope,
        API_URL,
        window,
        $,
        $http
    ) {
        "use strict";

        $scope.items = [
            { name: 'Share', icon: 'share' },
            { name: 'Upload', icon: 'upload' },
            { name: 'Copy', icon: 'copy' },
            { name: 'Print this page', icon: 'print' },
        ];

        $scope.listItemClick = function($index) {
            var clickedItem = $scope.items[$index];
            $mdBottomSheet.hide(clickedItem);
        };
    }
]);

INPUT FIELDS: HTML

<md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
    <div>
      <md-input-container>
        <label>Title</label>
        <input ng-model="user.title">
      </md-input-container>

      <md-input-container>
        <label>Email</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
</md-content>