Simple AngularJS Demo

by codecraig

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div ng-app>
    <div ng-controller="FooCtrl">
        <form role="form">
            <div class="form-group">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName" placeholder="Enter first name" ng-model="model.firstName">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName" placeholder="Enter last name" ng-model="model.lastName">
            </div>
            <label>Full name:</label>
            <div ng-click="clickMe(fullName())">{{fullName()}}</div>
        </form>
    </div>
</div>

JavaScript

function FooCtrl($scope) {
    $scope.model = {
        firstName: "Dr.",
        lastName: "Seuss"
    };
    $scope.fullName = function () {
        return $scope.model.firstName + " " + $scope.model.lastName;
    };
    $scope.clickMe = function (name) {
        alert("Your name is " + name);
    }
};