Send input data from a bootstrap form into a script - angularjs

Question

I'm new to angularJS and bootstrap, I already made a bootstrap form to input details but i having trouble getting the data from the form into a Javascript file, so that i can use the data.
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="db_short_Name">Database Short Name</label>
<div class="controls">
<input size="40" id="db_short_Name" name="db_short_Name" placeholder="Enter database short name" class="input-xlarge" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="db_display_Name">Database Display Name</label>
<div class="controls">
<input size="40" id="db_display_Name" name="db_display_Name" placeholder="Enter database display name" class="input-xlarge" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="db_max_Size">Database Max Size</label>
<div class="controls">
<input size="80" id="db_max_Size" name="db_max_Size" placeholder="Enter maxiumun size" class="input-xlarge" type="number">
</div>
</div>
</br>
<!-- Button -->
<div class="control-group">
<div class="controls">
<button id="button1_Create" name="button1_Create" class="btn btn-primary">Create</button>
<button id="button2_View" name="button2_View" class="btn btn-default">View</button>
</div>
</div>
</fieldset>
</form>
</div>
More info: Using this form a user will be able to create a browser database using Websql. the main components of creating a DB is:
var shortName= 'ABC';
var version = '0.1';
var displayName = 'DATABASE'
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
For now i just want to display what the user inputs using alert().

Answer 1

Please see here : http://jsfiddle.net/BL6QP/
View:
<div id="collapseOne" class="panel-collapse collapse" ng-app="app">
<div class="panel-body" ng-controller="myCtrl">
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="db_short_Name">Database Short Name</label>
<div class="controls">
<input size="40" id="db_short_Name" name="db_short_Name" placeholder="Enter database short name" class="input-xlarge" type="text" ng-model="mymodel.shortname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="db_display_Name">Database Display Name</label>
<div class="controls">
<input size="40" id="db_display_Name" name="db_display_Name" placeholder="Enter database display name" class="input-xlarge" type="text" ng-model="mymodel.displayname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="db_max_Size">Database Max Size</label>
<div class="controls">
<input size="80" id="db_max_Size" name="db_max_Size" placeholder="Enter maxiumun size" class="input-xlarge" type="number" ng-model="mymodel.maxsize">
</div>
</div>
</br>
<!-- Button -->
<div class="control-group">
<div class="controls">
<button id="button1_Create" name="button1_Create" class="btn btn-primary" ng-click="create()">Create</button>
<button id="button2_View" name="button2_View" class="btn btn-default">View</button>
</div>
</div>
</fieldset>
</form>
<pre>{{mymodel | json}}</pre>
</div>
</div>
JS:
var app = angular.module('app',[]);
app.controller('myCtrl', function($scope){
$scope.mymodel = {};
$scope.create = function(){
alert($scope.mymodel);
}
});