mscottreed/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Tutorials</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
    <style>
        .highlight {
            color:red;
            background-color:yellow;
        }
    </style>
</head>
<body>

<div ng-app="myApp">
    <!-- we've replaced the use of $scope with the preferred "controller as" syntax. see: http://toddmotto.com/digging-into-angulars-controller-as-syntax/-->
    <div ng-controller="AvengersCtrl as avengersCtrl">
        <input type="text" ng-model="search.$" ng-model-options="{ debounce: 200}">
        <table>
            <tr ng-repeat="actor in avengersCtrl.avengers.cast | filter:search">
                <td ng-bind-html="actor.name | highlight:search.$"></td>
                <td ng-bind-html="actor.character | highlight:search.$"></td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

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

myApp.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
            name: "Robert Downey Jr.",
            character: "Tony Stark / Iron Man"
        },
        {
            name: "Chris Evans",
            character: "Steve Rogers / Captain America"
        },
        {
            name: "Mark Ruffalo",
            character: "Bruce Banner / The Hulk"
        },
        {
            name: "Chris Hemsworth",
            character: "Thor"
        },
        {
            name: "Scarlett Johansson",
            character: "Natasha Romanoff / Black Widow"
        },
        {
            name: "Jeremy Renner",
            character: "Clint Barton / Hawkeye"
        },
        {
            name: "Tom Hiddleston",
            character: "Loki"
        },
        {
            name: "Clark Gregg",
            character: "Agent Phil Coulson"
        },
        {
            name: "Cobie Smulders",
            character: "Agent Maria Hill"
        },
        {
            name: "Stellan Skarsgard",
            character: "Selvig"
        },
        {
            name: "Samuel L. Jackson",
            character: "Nick Fury"
        },
        {
            name: "Gwyneth Paltrow",
            character: "Pepper Potts"
        },
        {
            name: "Paul Bettany",
            character: "Jarvis (voice)"
        },
        {
            name: "Alexis Denisof",
            character: "The Other"
        },
        {
            name: "Tina Benko",
            character: "NASA Scientist"
        }
    ];
    return Avengers;
});

function AvengersCtrl(Avengers) {
    var avengersCtrl = this;
    avengersCtrl.avengers = Avengers;
}

myApp.controller("AvengersCtrl", AvengersCtrl);

myApp.filter('highlight', ['$sce', function(sce) {
    return function(text, search) {
        if (search) {
            var re = new RegExp('('+search+')', 'gi');
            var result = text.replace(re, "<span class='highlight'>$1</span>");
            text = result;
        }
        return sce.trustAsHtml(text);
    };
}]);
	<!DOCTYPE html>
	<html>
	<head>
	<title>AngularJS Tutorials</title>
	<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
	<style>
	.highlight {
	color:red;
	background-color:yellow;
	}
	</style>
	</head>
	<body>

	<div ng-app="myApp">
	<!-- we've replaced the use of $scope with the preferred "controller as" syntax. see: http://toddmotto.com/digging-into-angulars-controller-as-syntax/-->
	<div ng-controller="AvengersCtrl as avengersCtrl">
	<input type="text" ng-model="search.$" ng-model-options="{ debounce: 200}">
	<table>
	<tr ng-repeat="actor in avengersCtrl.avengers.cast \| filter:search">
	<td ng-bind-html="actor.name \| highlight:search.$"></td>
	<td ng-bind-html="actor.character \| highlight:search.$"></td>
	</tr>
	</table>
	</div>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	var myApp = angular.module('myApp', []);

	myApp.factory('Avengers', function () {
	var Avengers = {};
	Avengers.cast = [
	{
	name: "Robert Downey Jr.",
	character: "Tony Stark / Iron Man"
	},
	{
	name: "Chris Evans",
	character: "Steve Rogers / Captain America"
	},
	{
	name: "Mark Ruffalo",
	character: "Bruce Banner / The Hulk"
	},
	{
	name: "Chris Hemsworth",
	character: "Thor"
	},
	{
	name: "Scarlett Johansson",
	character: "Natasha Romanoff / Black Widow"
	},
	{
	name: "Jeremy Renner",
	character: "Clint Barton / Hawkeye"
	},
	{
	name: "Tom Hiddleston",
	character: "Loki"
	},
	{
	name: "Clark Gregg",
	character: "Agent Phil Coulson"
	},
	{
	name: "Cobie Smulders",
	character: "Agent Maria Hill"
	},
	{
	name: "Stellan Skarsgard",
	character: "Selvig"
	},
	{
	name: "Samuel L. Jackson",
	character: "Nick Fury"
	},
	{
	name: "Gwyneth Paltrow",
	character: "Pepper Potts"
	},
	{
	name: "Paul Bettany",
	character: "Jarvis (voice)"
	},
	{
	name: "Alexis Denisof",
	character: "The Other"
	},
	{
	name: "Tina Benko",
	character: "NASA Scientist"
	}
	];
	return Avengers;
	});

	function AvengersCtrl(Avengers) {
	var avengersCtrl = this;
	avengersCtrl.avengers = Avengers;
	}

	myApp.controller("AvengersCtrl", AvengersCtrl);

	myApp.filter('highlight', ['$sce', function(sce) {
	return function(text, search) {
	if (search) {
	var re = new RegExp('('+search+')', 'gi');
	var result = text.replace(re, "<span class='highlight'>$1</span>");
	text = result;
	}
	return sce.trustAsHtml(text);
	};
	}]);