Using Bower

bower install angular-material-design-lite

Then require the mdl module:

angular.module('your-app', ['mdl']);

Config

Floating text labels and ripple effect are enabled by default.
Here's how you can disable them:

angular.module('your-app').config(function(mdlConfigProvider){
            mdlConfigProvider.floating = false;
            mdlConfigProvider.rippleEffect = false;
          });
        

Text Field

<mdl-text-field label="First Name" ng-model="first_name"></mdl-text-field>

Checkbox

<mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox>

Radio

<mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio>

<mdl-radio label="Male" value="female" ng-model="gender"></mdl-radio>

Switch

<mdl--switch label="Notifications" ng-model="show_notifications"></mdl-switch>

Buttons

<mdl-button>Flat button</mdl-button>

<mdl-button theme="primary">Primary Flat button</mdl-button>

<mdl-button theme="accent">Accept Flat button</mdl-button>

<mdl-button-raised>Raised button</mdl-button-raised>

<mdl-button-raised theme="primary">Primary Raised button</mdl-button-raised>

<mdl-button-raised theme="accent">Accent Raised button</mdl-button-raised>

Flat button Primary Flat button Accept Flat button
Raised button Primary Raised button Accent Raised button