AngularJS Example

HTML

<div ng-app="">
  <div ng-init="characters= [{name:'Brandt', age:29, gender:'male'}, {name:'Donny', age:42, gender:'male'}, {name:'The Dude', age:38, gender:'male'}, {name:'Walter', age:41, gender:'male'}, {name:'Maude', age:34, gender:'female'}, {name:'Bunny', age:25, gender:'female'}]">
      <h2>The Big Lebowski has {{characters.length}} main characters:</h2>
    <ul>
      Females:
      <li ng-repeat="character in characters | filter:'female'">
        {{character.name}} who is {{character.age}} years old and is a {{character.gender}}.
      </li>
      Males:
      <li ng-repeat="character in characters | filter:'!female'">
        {{character.name}} who is {{character.age}} years old and is a {{character.gender}}.
      </li>
    </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }