Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="sandbox" ng-controller="testCtrl">
  <div layout-gt-sm="row" layout="column" layout-margin>
    <form name="formName">
      <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required="true">
        <option value="" ng-hide="formName.first.$valid">Not Assigned</option>
      </select>
      <span class="error" ng-show="formName.first.$invalid ?true:false">Select Approver</span>
<pre>{{formName | json}}</pre>
    </form>
  </div>
</div>

CSS

main {
  background: ivory;
}

img {
  max-width: 100%;
  width: 100%;
}

JavaScript

angular.module('sandbox', ['ngMaterial']).controller('testCtrl', function($scope) {

  $scope.list1 = [{
    id: 1,
    value: 'apples'
  }, {
    id: 2,
    value: 'oranges'
  }];
});