Drvanon/ang_test.js

## ang_test.js
var myApp = angular.module('myApp', []);

/* myApp.factory('Colors', function() {
	return function() {
		var colors = {};

		colors.code_lib = [
		{
			color: "red",
			value: "#f00"
		}, {
			color: "green",
			value: "#0f0"
		}, {
			color: "blue",
			value: "#00f"
		}, {
			color: "cyan",
			value: "#0ff"
		}, {
			color: "magenta",
			value: "#f0f"
		}, {
			color: "yellow",
			value: "#ff0"
		}, {
			color: "black",
			value: "#000"
		}]

		return colors;
	};
}); */

function ColorCtrl($scope) {
	$scope.colors = [
		{
			color: "red",
			value: "#f00"
		}, {
			color: "green",
			value: "#0f0"
		}, {
			color: "blue",
			value: "#00f"
		}, {
			color: "cyan",
			value: "#0ff"
		}, {
			color: "magenta",
			value: "#f0f"
		}, {
			color: "yellow",
			value: "#ff0"
		}, {
			color: "black",
			value: "#000"
		}];
}

function ExCtrl ($scope) {
	$scope.friends = [
      {name:'John', age:25, gender:'boy'},
      {name:'Jessie', age:30, gender:'girl'},
      {name:'Johanna', age:28, gender:'girl'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Peter', age:95, gender:'boy'},
      {name:'Sebastian', age:50, gender:'boy'},
      {name:'Erika', age:27, gender:'girl'},
      {name:'Patrick', age:40, gender:'boy'},
      {name:'Samantha', age:60, gender:'girl'}
    ];
}

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Angular JS practice file</title>
</head>
<body>
	<div ng-app="myApp">
		<div ng-control="ColorCtrl">
			<input type="text" ng-model="search">
			<table>
				<tr ng-repeat="color in colors">
					<td>{{ color.color }}</td>
					<td>{{ color.value }}</td>
				</tr>
			</table>
		</div>
	</div>
	<div ng-control="ExCtrl">
      I have {{friends.length}} friends. They are:
      <input type="search" ng-model="q" placeholder="filter friends..." />
      <ul class="example-animate-container">
        <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
          [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
      </ul>
    </div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script src="ang_test.js"></script>
</body>
</html>
	var myApp = angular.module('myApp', []);

	/* myApp.factory('Colors', function() {
	return function() {
	var colors = {};

	colors.code_lib = [
	{
	color: "red",
	value: "#f00"
	}, {
	color: "green",
	value: "#0f0"
	}, {
	color: "blue",
	value: "#00f"
	}, {
	color: "cyan",
	value: "#0ff"
	}, {
	color: "magenta",
	value: "#f0f"
	}, {
	color: "yellow",
	value: "#ff0"
	}, {
	color: "black",
	value: "#000"
	}]

	return colors;
	};
	}); */

	function ColorCtrl($scope) {
	$scope.colors = [
	{
	color: "red",
	value: "#f00"
	}, {
	color: "green",
	value: "#0f0"
	}, {
	color: "blue",
	value: "#00f"
	}, {
	color: "cyan",
	value: "#0ff"
	}, {
	color: "magenta",
	value: "#f0f"
	}, {
	color: "yellow",
	value: "#ff0"
	}, {
	color: "black",
	value: "#000"
	}];
	}

	function ExCtrl ($scope) {
	$scope.friends = [
	{name:'John', age:25, gender:'boy'},
	{name:'Jessie', age:30, gender:'girl'},
	{name:'Johanna', age:28, gender:'girl'},
	{name:'Joy', age:15, gender:'girl'},
	{name:'Mary', age:28, gender:'girl'},
	{name:'Peter', age:95, gender:'boy'},
	{name:'Sebastian', age:50, gender:'boy'},
	{name:'Erika', age:27, gender:'girl'},
	{name:'Patrick', age:40, gender:'boy'},
	{name:'Samantha', age:60, gender:'girl'}
	];
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular JS practice file</title>
	</head>
	<body>
	<div ng-app="myApp">
	<div ng-control="ColorCtrl">
	<input type="text" ng-model="search">
	<table>
	<tr ng-repeat="color in colors">
	<td>{{ color.color }}</td>
	<td>{{ color.value }}</td>
	</tr>
	</table>
	</div>
	</div>
	<div ng-control="ExCtrl">
	I have {{friends.length}} friends. They are:
	<input type="search" ng-model="q" placeholder="filter friends..." />
	<ul class="example-animate-container">
	<li class="animate-repeat" ng-repeat="friend in friends \| filter:q">
	[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
	</li>
	</ul>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script src="ang_test.js"></script>
	</body>
	</html>