AngularJS | Two-Way Data Binding

HTML

<form>
    <div class="form-item">
        <label>First Name </label>
        <input type="text" ng-change="fName" ng-model="fName"/>
    </div>
    <div class="form-item">
        <label>Last Name </label>
        <input type="text" ng-change="lName" ng-model="lName"/>
    </div>
    <div class="form-item">
        <label>Show Preview <input type="checkbox" ng-model="checked"/></label>
    </div>
    <div class="form-item">
        <input type="submit" name="Submit" id="Submit"/>
    </div>
</form>

<div ng-show="checked" class="preview">
    <p ng-show="fName || lName"><b>Preview</b></p>
    <p ng-show="fName">Your First Name: {{fName}}</p>
    <p ng-show="lName">Your Last Name: {{lName}}</p>
</div>

CSS

*{
    font-family: arial;
    font-size: 13px;
}
form{
    padding: 10px 20px;
    background: #eee;
    border: 1px solid #ddd;
}
.form-item{
    margin: 10px 0;
    overflow:hidden;
}
.preview{
    padding: 5px 20px;
    background: #eee;
    border: 1px solid #ddd;
}
.preview h2{
    margin: 0;
}

JavaScript

var app = angular.module('myApp',[]);
fName='hi';