<label for="name">Your name</label>
<input type="text" name="name" id="name" />

<p>
  Hello <span class="name">{{name}}</span>!
</p>

$(function() {
  $("input[name=name]").keydown(function() {
    $('.name').html($(this).val());
  });
});

<div ng-app>
  <label for="name">Your name</label>
  <input type="text" ng-model="name"
    id="name"/>

  <p>Hello {{name}}!</p>
</div>

<tabs>
  <pane title="First Tab">
    First tab content
  </pane>
  <pane title="Second Tab">
    Second tab content
  </pane>
</tabs>

function FooController($scope, $window) {
  $scope.greet = function() {
    $window.alert("Hello " + $scope.name);
  };
}

<div ng-controller="FooController">
  <input type="text" ng-model="name" />
  <a ng-click="greet()">Greet</a>
</div>

describe("FooController", function() {
  it("greets the user", function() {
    var scope = { name: "Bob" };
    var win = {
      alert: jasmine.createSpy()
    };
    var ctrl = new FooController(scope, win);

    scope.greet();

    expect(win.alert).toHaveBeenCalledWith(
      "Hello Bob");
  });
});

function TodosController($scope) {
  $scope.todos = ["Learn Angular"];

  $scope.add = function() {
    if($scope.newTodo) {
      $scope.todos.push($scope.newTodo);
      $scope.newTodo = '';
    }
  };
}

<div ng-controller="TodosController">
  <input type="text" ng-model="newTodo" />
  <a href ng-click="add()">Add</a>
  <ul>
    <li ng-repeat="todo in todos">{{todo}}</li>
  </ul>
</div>

function OuterCtrl($scope) {
  $scope.foo = "outer foo";
  $scope.bar = "outer bar";
}

function InnerCtrl($scope) {
  $scope.bar = "inner bar";
  $scope.baz = $scope.foo + " o_O";
}

<div ng-controller="OuterCtrl">
  Outer Controller:<br>
  foo: {{foo}} | bar: {{bar}} | baz: {{baz}}
  <div ng-controller="InnerCtrl">
    Inner Controller:<br>
    foo: {{foo}} | bar: {{bar}} | baz: {{baz}}
  </div>
</div>

function PeopleCtrl($scope) {
  $scope.people = [{name: "adam"},
                   {name: "bob"}];
  // add / remove / reorder
}

function PersonCtrl($scope) {
  $scope.makeUpper = function() {
    $scope.person.name =
      $scope.person.name.toUpperCase();
  }
}

<div ng-controller="PeopleCtrl">
  {{people | json}}

  <div ng-repeat="person in people"
       ng-controller="PersonCtrl">
    {{person}}
    <a href ng-click="makeUpper()">Upcase!</a>
  </div>
</div>

var datepicker = function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      jQuery(el).datepicker({
        onSelect: function(dateText) {
          scope.$apply(function() {
            ctrl.$setViewValue(dateText);
          });
        }
      });

      ctrl.render = function() {
        jQuery(el).datepicker('setDate',
          ctrl.$viewValue);
      };
    }
  };
};

angular.module('samples').
  directive('datepicker', datepicker);

var sum = function() {
  return function(values) {
    return values.reduce(function(a, b) {
      return a + b; });
  };
};
angular.module('samples').filter('sum', sum);

<div ng-init="numbers = [1, 2, 3]">
  numbers: {{numbers | json}}
  sum: {{numbers | sum }}
</div>

var notifyUser = function($window) {
  return function(msg) {
    $window.alert(msg);
  };
};
angular.module('samples')
  .factory('notifyUser',
    ['$window', notifyUser]);

  angular.module('myModule', ['myServices',
    'myDirectives']).
  directive('foo', foo).
  value('bar', 'the bar').
  factory('myAlert', ['baz', myAlert]);

<form name="myForm">
  Foo*: <input type="text" required
    ng-model="foo" /><br>
  Bar*: <input type="text" required
    ng-model="bar" /><br>
  <button ng-disabled="myForm.$pristine
      || myForm.$invalid">Save</button>
</form>