view.html

<div class="container">
	<div class="row">
		<div class="col s12">
			<ul class="collapsible" data-collapsible="expandable">
				<li ng-repeat="category in categories">
		      <div class="collapsible-header">{{ category.name }}</div>
		      <div class="collapsible-body">
						<div class="row">
							<div class="col s6" ng-repeat="rule in category.rules[0]">
								<div class="card">
			            <div class="card-content">
			              <div class="row">
			              	<div class="col s6">
			              		<select>
			              			<option ng-repeat="nutrient in nutrients" value="{{nutrient.name}}" ng-selected="nutrient.name==rule.nutrientName">{{nutrient.name}}</option>
			              		</select>
			              	</div>
			              	<div class="col s6">
			              		<select>
			              			<option ng-repeat="rank in ranks" value="{{rank.id}}" ng-selected="rule.rank == rank.id">{{ rank.name }}</option>
			              		</select>
			              	</div>
			              	<div class="col s4">
			              		<select>
													<option ng-repeat="operation in operations" value="{{operation.name}}" ng-selected="operation.name==rule.operator">{{operation.symbol}}</option>
												</select>
			              	</div>
			              	<div class="col s4">
			              		<input type="number" ng-model="rule.threshold" value="{{rule.threshold}}">
			              	</div>
			              	<div class="col s4">
			              		<select>
			              			<option ng-repeat="unit in units" value="{{unit}}" ng-selected="rule.units == unit">{{unit}}</option>
			              		</select>
			              	</div>
			              </div>
			              <div class="row">
			              	<div class="col s4">
			              		<button class="btn red darken-3" ng-click="removeRule(category, rule)">Delete</button>
			              	</div>
			              </div>		
			            </div>
			          </div>
							</div>
					    <div class="col s12">
					    	
													
												
								<button ng-click="addRule(category.name)" class="btn">Add Rule</button>
								<button class="btn green" ng-click="saveData(category)">Save</button>
					    </div>
					  </div>
					</div>
		    </li>
		  </ul>
			<!--<button class="btn blue" ng-click="addCategory()" onclick="UpdateTextFields()">Add Category</button>-->
		</div>
		<!--<div class="col s12 m3">
			<div class="card grey darken-3">
				<div class="card-content white-text">
					<span class="card-title">Filter</span>
					<div class="row">
						<div class="col s12">
				      <div class="row">
				        <div class="input-field col s12 ">
				          <input id="by-name" type="text">
				          <label for="by-name">By Name</label>
				        </div>
				      </div>

						</div>
					</div>
				</div>
			</div>
		</div>-->
	</div>
</div>

<script>
function UpdateTextFields() {
	setTimeout(function() {
		Materialize.updateTextFields();
	}, 100);
}
$(document).ready(function(){
  $('.collapsible').collapsible();
	Materialize.updateTextFields();
});
</script>