home.html

<div class="layout-column" ng-controller="AppCtrl">
  <div class="layout-column" flex>
    <md-content class="md-padding" layout="row" layout-align="start center" flex layout-wrap id="nav">
      <div class="flex nav-link">Doselect App</div>
      <md-button ng-click="addRoom()" class="md-primary md-raised"><i class="material-icons">add</i>Add Room</md-button>
    </md-content>
  </div> 
	<md-content class="md-padding" layout="row" flex layout-wrap id="grid" ng-show="rooms.length>0">
    <div flex-xs="100" flex-sm="50" flex-gt-sm="33" ng-repeat="i in rooms">
      
      <md-card md-theme-watch>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Room No. {{i.num}}</span>
            <span class="md-head">Todo List</span>
          </md-card-title-text>
        </md-card-title>
        <md-card-content layout="row" layout-align="space-between">
          <div class="md-media-xl card-media">
            <ul ng-show="i.todolist.length>0">
				      <li ng-repeat="n in i.todolist track by $index">
					     {{n}}
				      </li>		
			       </ul>
			         <p ng-show="i.todolist.length==0">No task in todo list.</p>
          </div>
          
        </md-card-content>
		 <md-card-actions layout="row" layout-align="end end">
          <md-button ng-click="removeRoom(i.num)" class="md-primary md-raised rbutton"><i class="material-icons">close</i>Remove Room</md-button>
          <md-button class="md-primary md-raised" ng-href="#edit/{{i.num}}"><i class="material-icons">edit</i>EDIT TODO LIST</md-button>
        </md-card-actions>
      </md-card>
      <br />
    </div>
  </md-content>
</div>
<div id="bgimage1" class="bgimage">
</div>