Angular Material

HTML

<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css"/>          

<div id="appWrap" ng-app="app" ng-controller="AppCtrl">
        <md-toolbar layout="row">
      <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visually-hidden">Menu</span>
      </button>
      <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Tool bar Title</h1>
    </md-toolbar>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" mode='side'>
          
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <h1>Article title</h1>
            </md-content>
            <md-button class="md-primary" ng-click="showDialog($event)">
              Show Dialog
            </md-button>
            <md-autocomplete flex
                ng-disabled="ctrl.isDisabled"
                md-no-cache="ctrl.noCache"
                md-selected-item="ctrl.selectedItem"
                md-search-text="ctrl.searchText"
                md-items="item in ctrl.querySearch(ctrl.searchText)"
                md-item-text="item.display"
                md-floating-label="Favorite state">
              <span md-highlight-text="ctrl.searchText">{{item.display}}Fark</span>
        </md-autocomplete>
        </div>
        
   ...

CSS

.menuBtn {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px 0 0 16px;
  width: 36px;
} 
md-toolbar h1 {
  font-weight: normal;
}
md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

/* Using Data-URI converted from svg until <md-icon> becomes available 
https://github.com/google/material-design-icons
*/
.menuBtn {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat  center center;
}

JavaScript

app = angular.module('app', ['ngMaterial']);

//Set the material theme...
//try on of the Palettes from
//https://material.angularjs.org/#/Theming/01_introduction
app.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('docs-dark', 'default')
    .dark()
  //  .primaryPalette('blue-grey',{})
});


//Create the application controller, include material:
//SideNav, Dialog,
app.controller('AppCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){

    //Add the side nav toggling action    
    $scope.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };
    
    //ass the show dialog action
    $scope.showDialog = function(event){
        //addition options can be found at
        //https://material.angularjs.org/#/demo/material.components.dialog
        $mdDialog.show($mdDialog.alert().ok('OK!')
        .targetEvent(event));
    }
    
}]);

app.directive('flueBtn', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: { name:'@' },
        template: '<div ng-click="flomp()">' +
        '<div>{{name}}</div>....<br>' +
        '<div ng-transclude></div>' +
        '</div>'
    };
});