<div ng:controller="TodoCtrl">
                <form ng:submit="addTodo()">
                  <input type="text" name="todoText" size="35"
                         placeholder="enter your todo here">
                  <input type="submit" value="add"><br>
                  <span>{{remaining()}} remaining</span>
                  <input type="button" ng:click="removeDone()" value="clean up">
                </form>

                <ul>
                  <li ng:repeat="todo in todos">
                   <input type="checkbox" name="todo.done">
                   <span ng:class="'done-' + todo.done">{{todo.text}}</span>
                  </li>
                </ul>
              </div>

              <script>
                function TodoCtrl() {
                  var scope = this;
                  scope.todos = [{text:'learn angular', done:true},
                                 {text:'build an angular app', done:false}];

                  scope.addTodo = function() {
                    scope.todos.push({text:scope.todoText, done:false});
                    scope.todoText = '';
                  };

                  scope.remaining = function(){
                    return angular.Array.count(scope.todos, function(todo){
                      return !todo.done;
                    });
                  };

                  scope.removeDone = function() {
                    var oldTodos = scope.todos;
                    scope.todos = [];
                    angular.forEach(oldTodos, function(todo) {
                      if (!todo.done) scope.todos.push(todo);
                    });
                  };
                }
              </script>

              <style>
                .done-true {text-decoration: line-through; color: gray;}
              </style>
            

               <div ng:controller="PasswordController">
                 Password:
                 <input type="password" name="password"
                        placeholder="enter password" />
                 <span class="strength" ng:class="strength">
                   This password is {{strength}} !
                 </span>
                 <button ng:click="generate()">Generate on server</button>
                 <input type="checkbox" name="showPwd">Show password:
                 <span ng:show="showPwd">{{password}}</span>
               </div>


               <script>
               // url of the service
               var SERVICE_URL = 'http://angularjs.org/generatePassword.php' +
                                 '?callback=JSON_CALLBACK';

               // Dependency Injector injects $xhr service
               function PasswordController($xhr) {

                 // watch the password field and grade it.
                 this.$watch('password', function() {
                   if (this.password !== undefined) {
                     if (this.password.length > 8) {
                       this.strength = 'strong';
                     } else if (this.password.length > 3) {
                       this.strength = 'medium';
                     } else {
                       this.strength = 'weak';
                     }
                   }
                 });

                 // behavior
                 this.generate = function() {
                   var self = this;
                   $xhr('JSON', SERVICE_URL, function(code, response) {
                     self.password = response.password;
                   });
                 }
               }
               </script>

               <style>
                 .strong   { background-color: #060; border-color: #0F0;}
                 .medium   { background-color: #C60; border-color: #FC0;}
                 .weak     { background-color: #900; border-color: #F00;}
                 .strength { padding: 1px 10px; border: 2px solid; color: #FFF;}
               </style>
            

             <table ng:init="invoice=
                   {items:[{qty:10, description:'gadget', cost:9.95}]}">
               <tr>
                 <th>Qty</th>
                 <th>Description</th>
                 <th>Cost</th>
                 <th>Total</th>
                 <th></th>
               </tr>
               <tr ng:repeat="item in invoice.items">
                 <td><input name="item.qty" value="1" size="4" ng:required
                            ng:validate="integer"></td>
                 <td><input name="item.description"></td>
                 <td><input name="item.cost" value="0.00" ng:required
                            ng:validate="number" size="6"></td>
                 <td>{{item.qty * item.cost | currency}}</td>
                 <td>
                   [<a href ng:click="invoice.items.$remove(item)">X</a>]
                 </td>
               </tr>
               <tr>
                 <td><a href ng:click="invoice.items.$add()">add item</a></td>
                 <td></td>
                 <td>Total:</td>
                 <td>{{invoice.items.$sum('qty*cost') | currency}}</td>
               </tr>
             </table>