AngularJS Example:

by rmadhuram

HTML

<div ng-app="app" ng-controller="FormController">
    <div class="form-group col-lg-4 col-md-4">
        <label for="lastname">Last Name:</label>
        <input type="text" id="lastname" ng-model="lastName" placeholder="Last Name" class="form-control" />
    </div>
    <div class="form-group col-lg-4 col-md-4">
        <label for="campus">Campus:</label>
        <select class="form-control" id="campusid" ng-model="newcampus" ng-options="camp.name for camp in campus">
        </select>
    </div>
    
    <button ng-click='search()'>Search</button>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <style>

JavaScript

angular.module('app', [])
    .controller('FormController', ['$scope', function ($scope) {
        $scope.campus = [
            { name: 'campus 1' },
            { name: 'campus 2' }
        ];
        
        $scope.newcampus = $scope.campus[0];
        $scope.lastName = '';
        
        $scope.search = function() {
            alert('Name: ' + $scope.lastName + ' Campus: ' + $scope.newcampus.name);
        };
}]);