simple DOM angular

by manoj

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="container row-fluid" ng-app="myApp">
        <form id="formPerson" class="form-horizontal" ng-controller="myCtrl">

            <div class="control-group">
                <label class="control-label" for="textFName">First Name</label>
                <div class="controls">
                    <input id="textFName" ng-model="fName" name="textFName" type="text" placeholder="placeholder" class="input-xlarge" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="textLName">Last Name</label>
                <div class="controls">
                    <input id="textLName" ng-model="lName" name="textLName" type="text" placeholder="placeholder" class="input-xlarge" />
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <label class="checkbox" for="cbEnabled">
                        <input type="checkbox" ng-model="enabled" name="checkboxes" id="cbEnabled" value="Option one" />Enabled</label>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button id="btnSubmit" class="btn btn-primary" ng-disabled="!enabled" ng-click="clickSubmit()">Submit</button>
                </div>
            </div>

            <div ng-show="displayResult" ng-cloak id="result">Your Name is <b ng-bind="fullName"></b>.</div>
        </form>
    </div>

JavaScript

var myApp = angular.module('myApp', []);
        myApp.controller('myCtrl', ['$scope', function ($scope) {
            $scope.fName;
            $scope.lName;
            $scope.enabled = true;
            $scope.fullName;
            $scope.displayResult = false;
            $scope.clickSubmit = function () {
                $scope.fullName = $scope.fName + ' ' + $scope.lName;
                $scope.displayResult = true;
            };    
        }]);