<!DOCTYPE html>
<html ng-app = "myApp">
<head>
    <title>First Angularjs app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js" ></script>
</head>
<body>
    <div id="content" ng-controller="MainCtrl">

        <input type='text' ng-model='searchText' placeholder="Search a name like : Soheil or something " />

            <ul>
                <li ng-repeat='person in people | filter:searchText'> {{person.name}} </li>
            </ul>

    </div>



<footer class="author">
  <a href="http://webpen.ir/"> Webpen </a>
</footer>
</body>
</html>
/**
 * Created by soheil on 9/5/14.
 */
var app = angular.module('myApp' ,[]);

app.controller("MainCtrl", function($scope){

    $scope.people = [
        {
            name:'Soheil'
        },
        {
            name:'Soroush'
        },
        {
            name:'Reza'
        }

    ]



});
body{
    background: none repeat scroll 0 0 #eee;
    color: #3e3333;
    font-family: fantasy;
    font-size: 25px;
    font-weight: 100;
    margin: 0 auto;
    width: 960px;

}

input,select{
    width: 100%;
    border: medium none;
    height: 30px;
    margin-top: 10px;
    padding-left: 5px;
    border-radius: 5px;
}
hr{
    color: #eee;
}
footer{
  background:#fffeee;
  font-size:12px;
  text-align:center;
}

footer a{
 color:orange;
 text-decoration:none;
}