Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="Material">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.min.css">
​
</head>
<body ng-controller="MainController">
​
  
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Contacts</span>
    </h2>
  </md-toolbar>
  <md-content>
    <md-list>
      <md-item ng-repeat="item in contacts">
        <md-item-content>
          <div class="md-tile-left">
              <img ng-src="{{item.avatar}}" class="avatar" alt="{{item.name}}">
          </div>
          <div class="md-tile-content">
            <h3>{{item.name}}</h3>
            <h4>{{item.phone}}</h4>
          </div>
        </md-item-content>
      </md-item>
  </md-content>  
  
  
  
  
  
  
  <!-- Angular Material Dependencies -->
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
​
  <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
  <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.min.js"></script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
crysfelpro
0viewers