/index.html

## index.html
<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<style id="jsbin-css">
.odd {
  background-color: blue;
}
.even {
  background-color: red;
}
</style>
</head>
<body>

<ul ng-controller="PeopleController">
  <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
    {{person.name}} lives in {{person.city}}
  </li>
</ul>

<script id="jsbin-javascript">
angular.module('myApp', [])
.controller('PeopleController', function($scope) {
  $scope.people = [
    {name: "Ari", city: "San Francisco"},
    {name: "Erik", city: "Seattle"}
  ];
});
</script>

<script id="jsbin-source-html" type="text/html"><!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"><\/script>
</head>
<body>

<ul ng-controller="PeopleController">
  <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
    {{person.name}} lives in {{person.city}}
  </li>
</ul>

</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.odd {
  background-color: blue;
}
.even {
  background-color: red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp', [])
.controller('PeopleController', function($scope) {
  $scope.people = [
    {name: "Ari", city: "San Francisco"},
    {name: "Erik", city: "Seattle"}
  ];
});</script></body>
</html>

## jsbin.akuYUkey.css
.odd {
  background-color: blue;
}
.even {
  background-color: red;
}

## jsbin.akuYUkey.js
angular.module('myApp', [])
.controller('PeopleController', function($scope) {
  $scope.people = [
    {name: "Ari", city: "San Francisco"},
    {name: "Erik", city: "Seattle"}
  ];
});
	<!doctype html>
	<html ng-app="myApp">
	<head>
	<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
	<style id="jsbin-css">
	.odd {
	background-color: blue;
	}
	.even {
	background-color: red;
	}
	</style>
	</head>
	<body>

	<ul ng-controller="PeopleController">
	<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
	{{person.name}} lives in {{person.city}}
	</li>
	</ul>

	<script id="jsbin-javascript">
	angular.module('myApp', [])
	.controller('PeopleController', function($scope) {
	$scope.people = [
	{name: "Ari", city: "San Francisco"},
	{name: "Erik", city: "Seattle"}
	];
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!doctype html>
	<html ng-app="myApp">
	<head>
	<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"><\/script>
	</head>
	<body>

	<ul ng-controller="PeopleController">
	<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
	{{person.name}} lives in {{person.city}}
	</li>
	</ul>

	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.odd {
	background-color: blue;
	}
	.even {
	background-color: red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp', [])
	.controller('PeopleController', function($scope) {
	$scope.people = [
	{name: "Ari", city: "San Francisco"},
	{name: "Erik", city: "Seattle"}
	];
	});</script></body>
	</html>