dustinmyers · August 11, 2015 16:22
diff --git a/app.js b/app.js
 var app = angular.module('nestedRepeats', []);
diff --git a/MainCtrl.js b/MainCtrl.js
 app.controller('MainCtrl', function($scope, URL, $firebaseObj) {
    
    // Normally we would handle data inside a service or factory... but for the
    // example, we keep it short and simple, and hard code it into the controller.
    $scope.data = [
        {name: "Dustin", from:"Idaho", hobbies: ["Snowboarding", "Coding"]},
        {name: "Brendan", from:"Utah", hobbies: ["Airsoft", "Writing"]},
        {name: "Adriana", from:"Mexico", hobbies: ["Sleeping", "Bird Watching"]},
        {name: "Andy", from:"Ogden", hobbies: ["Skiing", "Dirt Scootering"]}
    ];
    
    $scope.test = 'Hello class!'
 });
diff --git a/view.html b/view.html
 <!DOCTYPE html>
 <html ng-app='nestedRepeats'>
    <body ng-controller='MainCtrl'>
        
        <!--First repeat sets each individual object in the data array-->
        <!--to "person". Putting this repeat inside the <ul> tag means-->
        <!--that the entire <ul> will be repeated for each object inside -->
        <!--our data array. -->
        <ul ng-repeat='person in data'>
            <h1>Name: {{ person.name }}</h1>
            <h3>From: {{ person.from }}</h3>
            <h3>Hobbies</h3>
            <ul>
                <!--Now we are at our nested repeat. Remember we have -->
                <!--each 'person' set up already from the first repeat,-->
                <!--so we can exploit that with a nested repeat. So we-->
                <!--will call person.hobbies (person being the object,-->
                <!--and hobbies being a key, or property inside the-->
                <!--object) and repeat through the array found at hobbies.-->
                <!--This time we don't want the full <ul> repeated, just-->
                <!--the <li>.-->
                <li ng-repeat='hobby in person.hobbies'>{{ hobby }}</li>
            </ul>
        </ul>
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="MainCtrl.js"></script>
    </body>
 </html>
	app.controller('MainCtrl', function($scope, URL, $firebaseObj) {

	// Normally we would handle data inside a service or factory... but for the
	// example, we keep it short and simple, and hard code it into the controller.
	$scope.data = [
	{name: "Dustin", from:"Idaho", hobbies: ["Snowboarding", "Coding"]},
	{name: "Brendan", from:"Utah", hobbies: ["Airsoft", "Writing"]},
	{name: "Adriana", from:"Mexico", hobbies: ["Sleeping", "Bird Watching"]},
	{name: "Andy", from:"Ogden", hobbies: ["Skiing", "Dirt Scootering"]}
	];

	$scope.test = 'Hello class!'
	});
	<!DOCTYPE html>
	<html ng-app='nestedRepeats'>
	<body ng-controller='MainCtrl'>

	<!--First repeat sets each individual object in the data array-->
	<!--to "person". Putting this repeat inside the <ul> tag means-->
	<!--that the entire <ul> will be repeated for each object inside -->
	<!--our data array. -->
	<ul ng-repeat='person in data'>
	<h1>Name: {{ person.name }}</h1>
	<h3>From: {{ person.from }}</h3>
	<h3>Hobbies</h3>
	<ul>
	<!--Now we are at our nested repeat. Remember we have -->
	<!--each 'person' set up already from the first repeat,-->
	<!--so we can exploit that with a nested repeat. So we-->
	<!--will call person.hobbies (person being the object,-->
	<!--and hobbies being a key, or property inside the-->
	<!--object) and repeat through the array found at hobbies.-->
	<!--This time we don't want the full <ul> repeated, just-->
	<!--the <li>.-->
	<li ng-repeat='hobby in person.hobbies'>{{ hobby }}</li>
	</ul>
	</ul>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
	<script type="text/javascript" src="app.js"></script>
	<script type="text/javascript" src="MainCtrl.js"></script>
	</body>
	</html>